Jak dopasować obraz (img) do elementu div i zachować proporcje?

Mam div 48x48 i wewnątrz jest element img, chcę dopasować go do div bez utraty żadnej części, w międzyczasie zachowany jest stosunek, czy można to osiągnąć używając html i css?

Będziesz potrzebował trochę JavaScript, aby zapobiec przycinaniu, jeśli nie znasz rozmiaru obrazu w momencie pisania CSS.

HTML i 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%;
}

Jeśli korzystasz z biblioteki JavaScript, możesz chcieć z niej skorzystać.

Użyj max-height:100%; max-width:100%;dla obrazu wewnątrz div.

Niestety max-width + max-height nie w pełni pokrywają moje zadanie ... Więc znalazłem inne rozwiązanie:

Aby zapisać proporcje obrazu podczas skalowania, możesz również użyć object-fitwłaściwości CSS3.

Przydatny artykuł: Kontroluj proporcje obrazu za pomocą CSS3

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

Złe wieści: IE nie jest obsługiwany ( mogę używać )

Korzystanie tylko z 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%;
}

Spowoduje to, że obraz rozszerzy się i wypełni jego rodzica, którego rozmiar jest ustawiony w divCSS.

Miałem wiele problemów, aby to działało, każde znalezione rozwiązanie wydawało się nie działać.

Zdałem sobie sprawę, że muszę ustawić wyświetlanie div na flex, więc w zasadzie to jest mój CSS:

div{
display: flex;
}

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

Wypróbuj CSS:

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

U mnie działał następujący CSS (przetestowany w Chrome, Firefox i Safari).

Istnieje wiele rzeczy działających razem:

• max-height: 100%;, max-width: 100%;I height: auto;, width: auto;aby skalę IMG dowolny wymiarowania najpierw osiąga 100% przy zachowaniu proporcji
• position: relative;w pojemniku iu position: absolute;dziecka razem z lewym górnym rogiem obrazu w pojemniku top: 50%;i left: 50%;wyśrodkuj go
• transform: translate(-50%, -50%); przesuwa obraz z powrotem w lewo i do góry o połowę, tym samym wyśrodkowując obraz w pojemniku

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%);
}

Ustawienie zdjęcia jako obrazu tła da nam większą kontrolę nad rozmiarem i położeniem, pozostawiając tag img, aby służył innemu celowi ...

Poniżej, jeśli chcemy, aby element div miał taki sam współczynnik proporcji jak zdjęcie, to placeholder.png jest małym przezroczystym obrazkiem o takich samych proporcjach jak zdjęcie.jpg. Jeśli zdjęcie jest kwadratem, jest to element zastępczy 1px x 1px, jeśli zdjęcie jest miniaturą wideo, jest to element zastępczy 16x9 itd.

Jeśli chodzi o to pytanie, użyj symbolu zastępczego 1x1, aby zachować kwadratowy współczynnik div, a obraz tła za pomocą, background-sizeaby zachować proporcje zdjęcia.

Użyłem background-position: center center;więc zdjęcie będzie wyśrodkowane w div. (Wyrównanie zdjęcia w pionie na środku lub na dole byłoby brzydkie w stosunku do zdjęcia w tagu 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>

Aby uniknąć dodatkowego żądania http, przekonwertuj obraz zastępczy na adres URL danych .

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

możesz użyć klasy "img-fluid" dla nowszej wersji, np. Bootstrap v4 .

i może używać klasy „img-responsive” dla starszych wersji, takich jak Bootstrap v3 .

Użycie : -

img tag z: -

class = "img-fluid"

src = „...”

Oto podejście oparte na języku JavaScript. Skaluje obraz stopniowo w dół, aż będzie pasował prawidłowo. Ty wybierasz, jak bardzo chcesz ją zmniejszyć za każdym razem, gdy się nie powiedzie. Ten przykład zmniejsza go o 10% za każdym razem, gdy się nie powiedzie:

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);
});

Zapraszam do bezpośredniego kopiowania i wklejania.

U mnie zadziałało:

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

inline-flex był wymagany, aby obrazy nie wychodziły poza obszar div.