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:
title
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?
Jika anda menggunakanobject-fit: contain，那么图像的原始宽高比已经被保留，因为整个图像必须适应其父元素。所以，如果图像原始宽度为100px，高度为150px，并且您将图像设置为width: 100px和height: 200px，图像的高度仍然为150px，但是在figureruang 25px tambahan akan ditambahkan di bahagian atas dan bawah elemen.
Untuk menyelesaikan masalah ini, anda hanya perlu menetapkan ketinggian kepada "auto".
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 elemenobject-fit: contain之外的其他方法。您可以在这里了解其他选项，但也许您想设置figuredan biarkan imej memenuhi ruang itu. Dalam kes ini, anda boleh melakukan ini:
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika anda menggunakan
object-fit: contain，那么图像的原始宽高比已经被保留，因为整个图像必须适应其父元素。所以，如果图像原始宽度为100px，高度为150px，并且您将图像设置为width: 100px和height: 200px，图像的高度仍然为150px，但是在figureruang 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之外的其他方法。您可以在这里了解其他选项，但也许您想设置figuredan 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; }