Лучший способ правильно установить размер изображения на основе устройства

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>

Answer 2

<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