Evita l'allungamento sull'immagine css

Question

Sto riproducendo un'immagine nel mio div. Voglio evitare di allungare la mia immagine.

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

Il mio problema è che la mia immagine si piega sulla larghezza. Voglio essere di larghezza normale, anche se parte dell'immagine mancherà.

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

Ho risolto.

Answer 1

Mettere l'immagine come sfondo div se si vuole evitare di allungare il modo più semplice (mantenendo la larghezza originale).

Answer 2

Uso max-width invece di min-width, e appena impostato height a 300px (o utilizzare solo max-height).

Answer 3

È possibile utilizzare overflow:hidden per nascondere qualsiasi parte dell'immagine al di fuori della larghezza del div.

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

Answer 4

Vorrei dimenticare di impostare l'altezza minima e l'altezza massima. Basta impostare l'altezza su 300 pixel e mettere un overflow nascosto sul tag div. In questo modo, indipendentemente dalle dimensioni dell'immagine, resterà sempre in proporzione e non oltrepasserà mai i limiti del tag div.

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