Geek Answers Handbook

The best way to correctly set the image size based on the device

Being a designer today, one of the biggest obstacles in my life today is placing an image on a web page that fits all browsers on all devices. To fit one image, I tried to create a code like the one below and check the height and make sure that the image fits and the image is in the middle of the screen. All I want to do is place a 600x894 image in the middle of the screen, regardless of device or browser. If the screen size is smaller, then the image should be smaller. What is the best way to do this?

img {position:absolute;left:50%;top:50%;display:block;} @media only screen and (max-height : 600px) {img{width: 389px;height: 580px;margin-left: -194px;margin-top: -290px}} @media only screen and (max-height : 700px) {img{width: 456px;height: 680px;margin-left: -228px;margin-top: -340px}} @media only screen and (max-height : 800px) {img{width: 524px;height: 780px;margin-left: -262px;margin-top: -390px}} @media only screen and (max-height : 900px) {img{width: 591px;height: 880px;margin-left: -295px;margin-top: -440px}}
+7
html css html5
source share
2 answers

You can do something like the following. Try resizing your browser and see how it resizes to fit the width of the screen and is always centered.

 html, body { height: 100%; width: 100%; margin: 0; } div { display: block; background: red; height: 100%; position: relative; } img { max-width: 100%; max-height: 100%; margin: 0 auto; width: auto; display: block; } 
 <div> <img src="http://fc06.deviantart.net/fs17/i/2007/149/0/4/fire_wolf_by_frenky666.jpg"> </div>
+2
source share
 <style type="text/css"> img{ display: block; margin: 0 auto; max-width: 100%; } <img src="http://static.jsbin.com/images/dave.min.svg" alt="">

http://jsbin.com/wusoxilero/1

+2
source share

More articles:


All Articles