Unikaj rozciągania obrazu css

Question

Renderuję obrazek w moim dziale. Chcę uniknąć rozciągania mojego obrazu.

div { 
      height: 300px; 
      width: 300px; 
     } 
    img { 
      min-width: 300px; 
      min-height: 300px; 
      max-height: 300px; 
     } 

Mój problem polega na tym, że mój wizerunek streści się na szerokość. Chcę być normalną szerokością, mimo że niektóre obrazy będą chybiały.

div { 
      height: 300px; 
      width: 300px; 
      overflow: hidden; 
     } 
    img { 
      height: 300px 
      max-width: none; 
      min-width: 300px; 
     } 

Rozwiązałem go.

Answer 1

Umieść obraz jako tło div, jeśli chcesz uniknąć rozciągania w najprostszy sposób (zachowując pierwotną szerokość).

Answer 2

Zastosowanie max-width zamiast min-width i po prostu ustawić height do 300px (lub użyć tylko max-height).

Answer 3

Możesz użyć overflow:hidden, aby ukryć dowolną część obrazu poza szerokością div.

div { 
     height: 300px; 
     width: 300px; 
     overflow: hidden; 
    } 
img { 
     /*min-width: 300px;*/ 
     height: 300px; 
    } 

Answer 4

Zapomniałabym ustawić minimalną wysokość i maksymalną wysokość. Po prostu ustaw wysokość na 300 pikseli i umieść nadmiar ukryty na znaczniku div. W ten sposób bez względu na rozmiar obrazu zawsze będzie on proporcjonalny i nigdy nie przekroczy granic znacznika div.

div { height: 300px; width: 300px; overflow: hidden; } 
img { height: 300px; }