Bagaimanakah Saya Boleh Ubah Saiz dan Pangkas Imej kepada Dimensi Tertentu Hanya Menggunakan CSS?

Memaparkan Imej Bersaiz dan Dipotong dengan CSS

Keperluan: Paparkan imej daripada URL dengan lebar dan ketinggian yang ditentukan , tanpa mengira nisbah aspek asalnya. Imej hendaklah diubah saiznya dan kemudian dipangkas agar sesuai dengan dimensi yang dikehendaki.

Penyelesaian: Gabungkan sifat img dan imej latar belakang:

• Gunakan img untuk mengubah saiz imej sambil mengekalkan nisbah bidangnya.
• Gunakan imej latar belakang untuk memangkas imej yang diubah saiz kepada saiz yang dikehendaki.

Contoh:

Pertimbangkan imej dengan dimensi 800x600 piksel yang ingin kami paparkan sebagai 200x100 piksel.

HTML:

<div class="crop">
    <img src="https://i.sstatic.net/wPh0S.jpg" alt="Donald Duck">
</div>

CSS:

.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

Penjelasan:

• Kelas .crop mentakrifkan bekas untuk imej, dengan lebar dan tinggi yang diingini.
• Elemen img digunakan untuk mengubah saiz imej sambil mengekalkan nisbah bidangnya. Lebar dan tinggi ditetapkan untuk mengekalkan nisbah saiz asal.
• Jing negatif digunakan pada elemen img ke tengah dan memangkasnya dalam bekas .crop. Jidar dikira berdasarkan saiz penuh imej asal (400px x 300px) dan saiz paparan yang diingini (200px x 100px).

Pendekatan ini membolehkan anda mengubah saiz dan memangkas imej secara dinamik, memastikan ia dipaparkan dalam saiz dan nisbah bidang yang diingini pada pelbagai peranti.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Ubah Saiz dan Pangkas Imej kepada Dimensi Tertentu Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!