Come posso adattare un'immagine (img) all'interno di un div e mantenere le proporzioni?

Ho un div 48x48 e al suo interno c'è un elemento img, voglio inserirlo nel div senza perdere alcuna parte, nel frattempo il rapporto viene mantenuto, è realizzabile usando html e css?

Avrai bisogno di JavaScript per evitare il ritaglio se non conosci la dimensione dell'immagine nel momento in cui scrivi il CSS.

HTML e JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

Se usi una libreria JavaScript, potresti volerne approfittare.

Utilizzare max-height:100%; max-width:100%;per l'immagine all'interno del div.

Purtroppo la larghezza massima + altezza massima non coprono completamente il mio compito ... Quindi ho trovato un'altra soluzione:

Per salvare il rapporto immagine durante il ridimensionamento è anche possibile utilizzare la proprietà object-fitCSS3.

Articolo utile: controlla le proporzioni dell'immagine con CSS3

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

Cattive notizie: IE non supportato ( posso usare )

Utilizzando solo CSS:

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

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

Questo farà espandere l'immagine per riempire il suo genitore, di cui la sua dimensione è impostata nel divCSS.

Avevo molti problemi per farlo funzionare, ogni singola soluzione che ho trovato non sembra funzionare.

Mi sono reso conto che dovevo impostare il display div su flex, quindi sostanzialmente questo è il mio CSS:

div{
display: flex;
}

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

Prova CSS:

img {
  object-fit: cover;
  height: 48px;
}

Per me, il seguente CSS ha funzionato (testato su Chrome, Firefox e Safari).

Ci sono più cose che lavorano insieme:

• max-height: 100%;, max-width: 100%;E height: auto;, width: auto;rendere la scala di qualsiasi dimensione img primi raggiunge il 100%, mantenendo le proporzioni
• position: relative;nel contenitore e position: absolute;nel bambino insieme top: 50%;e left: 50%;centrare l'angolo in alto a sinistra dell'img nel contenitore
• transform: translate(-50%, -50%); sposta l'img indietro a sinistra e in alto di metà della sua dimensione, centrando così l'img nel contenitore

CSS:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

Impostare la foto come immagine di sfondo ci darà un maggiore controllo sulle dimensioni e sul posizionamento, lasciando il tag img per uno scopo diverso ...

Di seguito, se vogliamo che il div abbia le stesse proporzioni della foto, placeholder.png è una piccola immagine trasparente con le stesse proporzioni di photo.jpg. Se la foto è quadrata, è un segnaposto 1px x 1px, se la foto è un'anteprima video, è un segnaposto 16x9, ecc.

Specifico per la domanda, usa un segnaposto 1x1 per mantenere le proporzioni quadrate del div, con un'immagine di sfondo che usa background-sizeper mantenere le proporzioni della foto.

Ho usato background-position: center center;così la foto sarà centrata nel div. (L'allineamento della foto al centro o in basso verticale diventerebbe brutto con la foto nel tag img.)

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

Per evitare una richiesta http aggiuntiva, converti l'immagine segnaposto in un dato: URL .

<img src="data:image/png;base64,..."/>

è possibile utilizzare la classe "img-fluid" per la versione più recente, ad esempio Bootstrap v4 .

e può utilizzare la classe "img-responsive" per versioni precedenti come Bootstrap v3 .

Utilizzo : -

tag img con: -

class = "img-fluid"

src = "..."

Ecco un approccio tutto JavaScript. Ridimensiona progressivamente un'immagine fino a quando non si adatta correttamente. Scegli quanto ridurlo ogni volta che fallisce. Questo esempio lo riduce del 10% ogni volta che fallisce:

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

Sentiti libero di copiare e incollare direttamente.

Ciò che ha funzionato per me è stato:

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

inline-flex era necessario per evitare che le immagini andassero fuori dal div.