Come posso riempire un div con un'immagine mantenendolo proporzionale?

Question

Ho trovato questa discussione - How do you stretch an image to fill a <div> while keeping the image's aspect-ratio? - che non è interamente la cosa che voglio.

Ho un div con una certa dimensione e un'immagine al suo interno. Voglio sempre compilare il div con l'immagine indipendentemente se l'immagine è orizzontale o verticale. E non importa se l'immagine è tagliata (il div stesso ha overflow nascosto).

Quindi, se l'immagine è ritratto voglio il width di essere 100% e l'height:auto in modo che rimanga in proporzione. Se l'immagine è orizzontale, voglio che lo height sia 100% e l'auto width to be. Sembra complicato, vero?

<div class="container"> 
    <img src="some-image.jpg" alt="Could be portrait or landscape"/> 
</div> 

Poiché non so come farlo, ho semplicemente creato un'immagine rapida di ciò che intendo. Non riesco nemmeno a descriverlo correttamente.

Quindi, credo che io non sono il primo a chiedere questo. Tuttavia non ho potuto trovare una soluzione a questo. Forse c'è un nuovo modo per farlo in CSS3 - sto pensando al flex-box. Qualche idea? Forse è ancora più semplice di quanto mi aspetti?

Answer 1

No, non esiste una soluzione solo CSS3 a questo. Il top answer sulla domanda che hai collegato è la seconda cosa migliore, però.

Answer 2

Considerare l'utilizzo di background-size: cover (IE9 +) in combinazione con background-image. Per IE8-, c'è un polyfill.

Answer 3

Se ho capito correttamente cosa si desidera, è possibile lasciare gli attributi larghezza e altezza dell'immagine per mantenere le proporzioni e utilizzare flexbox per eseguire il centraggio.

.fill { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    overflow: hidden 
 
} 
 
.fill img { 
 
    flex-shrink: 0; 
 
    min-width: 100%; 
 
    min-height: 100% 
 
}

<div class="fill"> 
 
    <img src="https://lorempizza.com/320/240" alt="" /> 
 
</div>

JSFiddle here

Ho provato questo con successo in IE9, Chrome 31 e Opera 18. Ma nessun altri browser sono stati testati. Come sempre, devi considerare i tuoi particolari requisiti di supporto.

Answer 4

Ecco il mio esempio di lavoro. Ho usato un trucco che sta impostando l'immagine come sfondo del contenitore div con sfondo-size: copertina e sfondo-posizione: centro centro

Ho posizionato l'immagine con larghezza: 100% e opacità: 0 rendendolo invisibile . Nota che sto mostrando la mia immagine solo perché ho un interesse speciale nel chiamare l'evento click secondario.

Si prega di notare che tutto sommato sto usando angolare è completamente irrilevante.

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}"> 
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/> 
</div> 
<style> 
.foto-item { 
height: 75% !important; 
width: 100%; 
position: absolute; 
top: 0; 
left: 0; 
overflow:hidden; 
background-size: cover; 
background-position: center center; 
} 
</style> 

Il risultato è quello che si definisce come ottimale in tutti i casi

Answer 5

una vecchia questione, ma merita un aggiornamento come ora c'è un modo.

La corretta risposta basata su CSS è utilizzare object-fit: cover, che funziona come background-size: cover.Il posizionamento sarà gestito dall'attributo object-position, che per impostazione predefinita è il centraggio.

Ma non è supportato in alcun browser IE/Edge o Android < 4.4.4. Inoltre, object-position non è supportato da Safari, iOS o OSX. Polyfills esistono, object-fit-images sembra dare il miglior supporto.

Per ulteriori dettagli su come funziona la proprietà, vedere CSS Tricks article on object-fit per spiegazioni e demo.

Answer 6

Questo dovrebbe farlo:

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

Answer 7

Prova questo:

img { 
    position: relative; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    transform: translateX(-50%); 
} 

Spero che questo aiuti

Answer 8

E 'un po' tardi, ma ho appena avuto lo stesso problema e finalmente risolto con la aiuto di un altro post StackOverflow (https://stackoverflow.com/a/29103071).

.img { 
    object-fit: cover; 
    width: 50px; 
    height: 100px; 
} 

Spero che questo aiuti ancora qualcuno.

Ps: funziona anche con max-height, max-width, min-width e min-height proprietà CSS. È particolarmente utile se si utilizzano unità di lunghezza come 100% o 100vh/100vw per riempire il contenitore o l'intera finestra del browser.

Answer 9

È possibile utilizzare div per ottenere ciò. senza img tag :) spero che questo aiuti.

.img{ 
 
\t width:100px; 
 
\t height:100px; 
 
\t background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg'); 
 
\t background-repeat:no-repeat; 
 
\t background-position:center center; 
 
\t border:1px solid red; 
 
\t background-size:cover; 
 
} 
 
.img1{ 
 
\t width:100px; 
 
\t height:100px; 
 
\t background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg'); 
 
\t background-repeat:no-repeat; 
 
\t background-position:center center; 
 
\t border:1px solid red; 
 
\t background-size:cover; 
 
}

<div class="img"> \t 
 
</div> 
 
<div class="img1"> \t 
 
</div>