Najlepszym sposobem na prawidłowe ustawienie rozmiaru obrazu na podstawie urządzenia

Question

Będąc dziś projektantem, jedną z największych przeszkód w moim dzisiejszym życiu jest umieszczanie obrazu na stronie internetowej, która pasuje do wszystkich przeglądarek na wszystkich urządzeniach. Aby dopasować jedno zdjęcie, próbowałem utworzyć kod jak poniżej i sprawdzić wysokość i upewnić się, że obraz pasuje, a obraz jest pośrodku ekranu. Chcę tylko umieścić obraz o rozdzielczości 600x894 pośrodku ekranu, niezależnie od urządzenia i przeglądarki. Jeśli rozmiar ekranu jest mniejszy, obraz również powinien być mniejszy. Jaki jest najlepszy sposób na zrobienie tego?

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

Możesz zrobić coś takiego. Spróbuj zmienić rozmiar przeglądarki i sprawdź, jak zmienia rozmiar w zależności od szerokości ekranu i zawsze jest wyśrodkowany.

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