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

Ho trovato questo thread: come allunghi un'immagine per riempire un <div> mantenendo le proporzioni dell'immagine? - non è del tutto la cosa che voglio.

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

Quindi, se l'immagine è verticale, voglio widthche sia 100%e height:autocosì rimanga proporzionata. Se l'immagine è paesaggio voglio heightche sia 100%e l' width to beauto`. Sembra complicato, vero?

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

Dato che non so come farlo, ho semplicemente creato una rapida immagine di ciò che intendo. Non riesco nemmeno a descriverlo adeguatamente.

Quindi, immagino di non essere il primo a chiederlo. Tuttavia non sono riuscito a trovare una soluzione a questo problema. Forse c'è qualche nuovo modo CSS3 per farlo - sto pensando a flex-box. Qualche idea? Forse è anche più facile di quanto mi aspetto che sia?

Se capisco correttamente cosa vuoi, puoi lasciare gli attributi di larghezza e altezza fuori dall'immagine per mantenere le proporzioni e usare flexbox per fare il centraggio per te.

.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 qui

L'ho provato con successo in IE9, Chrome 31 e Opera 18. Ma non sono stati testati altri browser. Come sempre devi considerare le tue particolari esigenze di supporto.

È un po 'tardi ma ho appena avuto lo stesso problema e alla fine l'ho risolto con l'aiuto di un altro post di stackoverflow ( https://stackoverflow.com/a/29103071 ).

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

Spero che questo aiuti ancora qualcuno.

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

Una vecchia domanda ma merita un aggiornamento in quanto ora c'è un modo.

La risposta corretta basata su CSS è usare object-fit: cover, che funziona come background-size: cover. Il posizionamento verrebbe curato per object-positionattributo, che per impostazione predefinita è centratura.

Ma non è supportato in alcun browser IE / Edge o Android <4.4.4. Inoltre, object-positionnon è supportato da Safari, iOS o OSX. I polyfill esistono, le immagini che si adattano agli oggetti sembrano fornire il miglior supporto.

Per maggiori dettagli su come funziona la proprietà, consulta l' articolo sui trucchi CSSobject-fit per spiegazioni e demo.

Questo dovrebbe farlo:

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

Tutte le risposte seguenti hanno larghezza e altezza fisse, il che rende la soluzione "non reattiva".

Per ottenere il risultato ma mantenere l'immagine reattiva ho usato quanto segue:

1. All'interno del contenitore posizionare un'immagine gif trasparente con le proporzioni desiderate
2. Fornisci un tag immagine inline css sfondo con l'immagine che desideri ridimensionare e ritagliare

HTML:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

Puoi ottenere ciò utilizzando le proprietà CSS Flex. Si prega di vedere il codice di seguito

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

Prendi in considerazione l'utilizzo di background-size: cover(IE9 +) insieme a background-image. Per IE8-, c'è un polyfill .

Prova questo:

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

Spero che questo ti aiuti

Puoi usare div per ottenere ciò. senza tag img :) spero che questo aiuti.

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

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

L'unico modo in cui ho ottenuto lo scenario "migliore" descritto, è stato quello di mettere l'immagine come sfondo:

<div class="container"></div>​

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​

Ecco una risposta con il supporto a IE in object-fitmodo da non perdere il rapporto

Utilizzando un semplice frammento JS per rilevare se object-fitè supportato e quindi sostituire il imgper un filesvg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

Nota: ci sono anche alcuni object-fitpolyfill che object-fitfunzioneranno.

Ecco alcuni esempi:

• oggetto-FIT-immagini
• constancecchen / object-fit-pollyfill
• Polyfill per proprietà di adattamento agli oggetti CSS

Ecco il mio esempio di lavoro. Ho usato un trucco che sta impostando l'immagine come sfondo del contenitore div con background-size: cover e background-position: center center

Ho posizionato l'immagine con larghezza: 100% e opacità: 0 rendendola invisibile. Tieni presente che mostro la mia immagine solo perché ho un interesse speciale nel chiamare l'evento clic figlio.

Si prega di notare che anche se 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 definisci ottimale in tutti i casi

I valori CSS object-fit: covere delle object-position: left centerproprietà ora risolvono questo problema.

Basta fissare l'altezza dell'immagine e fornire width = auto

img{
    height: 95vh;
    width: auto;
}