Bagaimana cara memasukkan gambar (img) di dalam div dan mempertahankan rasio aspek?

Saya memiliki div 48x48 dan di dalamnya ada elemen img, saya ingin memasukkannya ke dalam div tanpa kehilangan bagian apa pun, sementara rasio disimpan, apakah dapat dicapai dengan menggunakan html dan css?

Anda memerlukan beberapa JavaScript untuk mencegah pemotongan jika Anda tidak mengetahui dimensi gambar pada saat Anda menulis css.

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

Jika Anda menggunakan Perpustakaan JavaScript, Anda mungkin ingin memanfaatkannya.

Gunakan max-height:100%; max-width:100%;untuk gambar di dalam div.

Sayangnya max-width + max-height tidak sepenuhnya menutupi tugas saya ... Jadi saya telah menemukan solusi lain:

Untuk menyimpan rasio Gambar saat penskalaan, Anda juga dapat menggunakan properti object-fitCSS3.

Artikel yang berguna: Mengontrol rasio aspek gambar dengan CSS3

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

Berita buruk: IE tidak didukung ( Can I Use )

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

Ini akan membuat gambar mengembang untuk mengisi induknya, yang ukurannya diatur di divCSS.

Saya mengalami banyak masalah agar ini berfungsi, setiap solusi yang saya temukan tampaknya tidak berhasil.

Saya menyadari bahwa saya harus mengatur tampilan div menjadi fleksibel, jadi pada dasarnya ini adalah CSS saya:

div{
display: flex;
}

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

Coba CSS:

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

Bagi saya, CSS berikut berfungsi (diuji di Chrome, Firefox, dan Safari).

Ada beberapa hal yang bekerja bersama:

• max-height: 100%;, max-width: 100%;dan height: auto;, width: auto;buat skala img ke dimensi mana pun yang pertama kali mencapai 100% dengan tetap mempertahankan rasio aspek
• position: relative;di wadah dan position: absolute;di anak bersama-sama dengan top: 50%;dan left: 50%;tengah sudut kiri atas img di wadah
• transform: translate(-50%, -50%); memindahkan img kembali ke kiri dan atas setengah ukurannya, sehingga memusatkan img di dalam container

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

Menyetel foto sebagai gambar latar belakang akan memberi kita kontrol lebih besar atas ukuran dan penempatan, membiarkan tag img memiliki tujuan yang berbeda ...

Di bawah, jika kita ingin div memiliki rasio aspek yang sama dengan foto, maka placeholder.png adalah gambar transparan kecil dengan rasio aspek yang sama seperti foto.jpg. Jika foto berbentuk persegi, itu adalah placeholder 1px x 1px, jika foto adalah gambar mini video, itu adalah placeholder 16x9, dll.

Khusus untuk pertanyaan, gunakan placeholder 1x1 untuk mempertahankan rasio persegi div, dengan gambar latar belakang yang digunakan background-sizeuntuk mempertahankan rasio aspek foto.

Saya dulu background-position: center center;jadi foto akan dipusatkan di div. (Menyejajarkan foto di tengah vertikal atau bawah akan menjadi jelek dengan foto di 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>

Untuk menghindari permintaan http tambahan, ubah gambar placeholder menjadi data: URL .

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

Anda dapat menggunakan kelas "img-fluid" untuk versi yang lebih baru yaitu Bootstrap v4 .

dan dapat menggunakan kelas "img-responsive" untuk versi lama seperti Bootstrap v3 .

Penggunaan : -

img tag dengan: -

class = "img-fluid"

src = "..."

Berikut semua pendekatan JavaScript. Ini menskalakan gambar secara bertahap hingga pas dengan benar. Anda memilih berapa banyak untuk menyusutkannya setiap kali gagal. Contoh ini menyusut 10% setiap kali gagal:

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

Jangan ragu untuk menyalin dan menempel secara langsung.

Apa yang berhasil bagi saya adalah:

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

inline-flex diperlukan agar gambar tidak keluar dari div.