Nisbah aspek imej dalam gambar

Question

Saya mempunyai imej dengan kapsyen seperti ini:

<figure>
<img src="image.jpg"/>
<figcaption>title</figcaption>
</figure>

Saya juga mempunyai img{max-width:100%}

Saya ingin menetapkan kedua-dua lebar dan tinggi imej dan mengekalkan nisbah bidang apabila lebar berkurangan di bawah nilai yang ditetapkan. Jadi, saya mencuba kod seperti ini:

<figure>
<img src="image.jpg" width="100" height="200" style="object-fit:contain"/>
<figcaption>title</figcaption>
</figure>

Ini kira-kira yang saya mahukan, tetapi apabila imej itu 'berkotak surat', tajuknya agak jauh dari bahagian bawah imej.

Adakah terdapat cara untuk mendapatkan hasil yang saya inginkan sambil mengekalkan tajuk yang selesa di bahagian bawah imej?

Answer 1

Jika anda menggunakan object-fit: contain，那么图像的原始宽高比已经被保留，因为整个图像必须适应其父元素。所以，如果图像原始宽度为100px，高度为150px，并且您将图像设置为width: 100px和height: 200px，图像的高度仍然为150px，但是在figure ruang 25px tambahan akan ditambahkan di bahagian atas dan bawah elemen.

Untuk menyelesaikan masalah ini, anda hanya perlu menetapkan ketinggian kepada "auto".

img {
  // 为了可读性，将您的样式声明移到这里
  width: 100px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

Sekarang, jika anda benar-benar ingin menentukan lebar dan tinggi, dan memaksa imej agar sesuai dengan dimensi tersebut, anda harus menggunakan apa-apa selain daripada lebar/tinggi elemen object-fit: contain之外的其他方法。您可以在这里了解其他选项，但也许您想设置figure dan biarkan imej memenuhi ruang itu. Dalam kes ini, anda boleh melakukan ini:

figure {
    display: block;
    width: 100px;
    max-width: 100%;
    height: 200px;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: blue;
}