基于设备正确设置图像大小的最佳方法

Question

作为今天的设计师,我今天生活中最大的障碍之一就是将图像放在适合所有设备上所有浏览器的网页上.只是为了适应一个图像我试图创建一个像下面的代码,并按高度检查,并确保图像适合和图像在屏幕的中间.我想要的是在屏幕中间放置一个600x894的图像,无论设备和浏览器如何.如果屏幕尺寸较小,那么图像也应该更小.什么是最好的方法呢？

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}}

Answer 1

你可以做类似下面的事情。尝试调整浏览器的大小，看看它如何根据屏幕的宽度调整大小，并且它始终居中。

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>