根据设备正确设置图像大小的最佳方法
作为今天的设计师，我今天生活中最大的障碍之一是在适合所有设备上所有浏览器的网页上放置图像。 只是为了适应一个图像，我试图创建一个像下面的代码，并检查高度，并确保图像适合和图像在屏幕中间。 我只需要在屏幕中间放置一张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}}
<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
你可以做如下的事情。 尝试调整浏览器大小，并根据屏幕宽度查看其大小，并始终居中。
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>