Bir görüntüyü (img) bir div içine nasıl sığdırabilir ve en boy oranını nasıl koruyabilirim?

Ben 48x48 div var ve içinde bir img öğesi var, ben herhangi bir bölümü kaybetmeden div içine sığdırmak istiyorum, bu arada oranı tutulur, html ve css kullanarak ulaşılabilir mi?

Css yazarken resmin boyutunu bilmiyorsanız kırpmayı önlemek için JavaScript kullanmanız gerekir.

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

Bir JavaScript Kitaplığı kullanıyorsanız kitaplığından yararlanmak isteyebilirsiniz.

max-height:100%; max-width:100%;Div içindeki görüntü için kullanın .

Ne yazık ki maksimum genişlik + maksimum yükseklik görevimi tam olarak kapsamıyor ... Bu yüzden başka bir çözüm buldum:

Ölçekleme sırasında Görüntü oranını kaydetmek içinobject-fit CSS3 özelliklerini de kullanabilirsiniz .

Yararlı makale: Görüntü en boy oranlarını CSS3 ile kontrol etme

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

Kötü haber: IE desteklenmiyor ( Kullanabilir miyim )

Yalnızca CSS kullanma:

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

Bu, görüntünün boyutunu divCSS'de ayarlanmış olan üst öğesini dolduracak şekilde genişleyecektir .

Bunu çalıştırmak için çok fazla sorunum vardı, bulduğum her çözüm işe yaramadı.

Div ekranını esneyecek şekilde ayarlamam gerektiğini fark ettim, bu yüzden temelde bu benim CSS'm:

div{
display: flex;
}

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

CSS'yi deneyin:

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

Benim için aşağıdaki CSS çalıştı (Chrome, Firefox ve Safari'de test edildi).

Birlikte çalışan birden çok şey var:

• max-height: 100%;, max-width: 100%;Ve height: auto;, width: auto;en boy oranı tutarak birinci% 100'de boyut hangisi img ölçek yapmak
• position: relative;kapta ve position: absolute;çocukta img'in sol üst köşesini kapta top: 50%;ve left: 50%;ortada
• transform: translate(-50%, -50%); img'yi boyutunun yarısı kadar sola ve yukarıya doğru hareket ettirir, böylece img'i kapta ortalar

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

Fotoğrafı arka plan resmi olarak ayarlamak, bize boyut ve yerleşim üzerinde daha fazla kontrol sağlayacak ve img etiketini farklı bir amaca hizmet edecek şekilde bırakacak ...

Aşağıda, div öğesinin fotoğrafla aynı en boy oranına sahip olmasını istiyorsak, placeholder.png, photo.jpg ile aynı en boy oranına sahip küçük şeffaf bir görüntüdür. Fotoğraf kare ise 1 piksel x 1 piksel yer tutucu, fotoğraf video küçük resmi ise 16x9 yer tutucu vb.

Soruya özgü olarak, divın kare oranını korumak için 1x1 yer tutucu kullanın background-sizeve fotoğrafın en boy oranını korumak için arka plan resmi kullanın .

Kullandığım background-position: center center;fotoğraf div ortasına yerleştirilir böylece. (Fotoğrafı dikey merkezde veya altta hizalamak, img etiketindeki fotoğrafla çirkinleşir.)

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>

Fazladan bir http isteğinden kaçınmak için yer tutucu resmi bir veri: URL'ye dönüştürün .

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

daha yeni bir sürüm için "img-fluid" sınıfını kullanabilirsiniz, yani Bootstrap v4 .

ve Bootstrap v3 gibi eski sürümler için "img-Responsive" sınıfını kullanabilir .

Kullanım : -

img etiketi: -

class = "img-akışkan"

src = "..."

İşte bütün bir JavaScript yaklaşımı. Görüntüyü doğru şekilde oturana kadar aşamalı olarak ölçeklendirir. Her başarısız olduğunda ne kadar küçüleceğini seçersiniz. Bu örnek, her başarısız olduğunda% 10 küçültür:

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

Doğrudan kopyalayıp yapıştırmaktan çekinmeyin.

Benim için işe yarayan şuydu:

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

görüntülerin div dışına çıkmasını önlemek için inline-flex gerekiyordu.