Best way to properly set image size based on device

2018-06-29 17:03:46

Being a designer today, one of the biggest obstacles of my life today is placing an image on a web page that fits in all browsers on all devices. Just to fit one image I tried to create a code like below and check by height and made sure image fit and image is in the middle of the screen. All I want is to put an image that is 600x894 in the middle of the screen regardless of the device and browser. If the screen size is smaller then image should be smaller as well. What is 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}}

<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

You could do something like the following. Try resizing the browser and look at how it resizes according to the width of the screen and it 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>

链接地址: http://www.djcxy.com/p/82928.html

上一篇: 我如何在Chrome扩展中播放声音