Jak zmienić rozmiar obrazu przy zachowaniu proporcji w CSS?

Question

Mam duży obraz. Chcę wyświetlić go na własnej stronie internetowej, a kiedy to zrobię bez żadnego CSS, wypełnia całą stronę i jest zbyt duży, by można go było wyświetlić na raz (pojawiają się paski przewijania). Chcę go skalować tak, aby pasował do wysokości ekranu użytkownika (nie do szerokości). Znalazłem rozwiązania, ale rozciągają obraz tak, aby pasował do całego ekranu - nie chcę tego, ponieważ psuje proporcje.

Zasadniczo chcę zmienić rozmiar obrazu przy zachowaniu proporcji. Jak mam to zrobic?

Answer 1

Wystarczy ustawić width do auto:

img { 
    width: auto; 
    max-height: 100%; 
} 

Oto skrzypce: http://jsfiddle.net/6Y5Zp/

Answer 2

Można użyć div z tła wizerunku i set background-size: zawierać:

div.image{ 
    background-image: url("your/url/here"); 
    background-size:contain; 
    background-repeat:no-repeat; 
    background-position:center; 
} 

Teraz możesz po prostu ustawić rozmiar div na dowolny, a nie tylko zachować proporcje obrazu, ale także będzie on scentralizowany w pionie i poziomie. Po prostu nie zapomnij ustawić rozmiarów na css, ponieważ divy nie mają atrybutu width/height na samym znaczniku.

Właściwość wielkości tła wynosi np.> = 9 tylko.

Answer 3

myślę, że trzeba wkleić klasę wewnątrz obrazu, który ma pokazać jak ten

< image class="image" > 

i jest to klasa

.image 


text align: center 
max width:pixels you want 
max height pixels you want 

ale upewnij się, że oba są takie same ilości w ten sposób nie wydostanie się z ekranu w wysokości i szerokości.

czy można grać z szerokością i wysokością

Answer 4

oto próbka jeden

div{ 
 
    width: 200px; 
 
    height:200px; 
 
    border:solid 
 
} 
 

 
img{ 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: contain; 
 
    }

<div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png"> 
 
</div>