Bagaimanakah Saya Boleh Mengubah Saiz dan Memangkas Imej Menggunakan HTML dan CSS Semasa Mengekalkan Nisbah Aspek?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mengubah Saiz dan Memangkas Imej Menggunakan HTML dan CSS Semasa Mengekalkan Nisbah Aspek?

Barbara Streisand

Lepaskan： 2024-12-25 09:35:00

asal

197 orang telah melayarinya

How Can I Resize and Crop Images Using HTML and CSS While Maintaining Aspect Ratio?

Memaparkan Imej Bersaiz dan Dipotong dengan CSS

Pengenalan

Memaparkan imej dalam dimensi tertentu sambil mengekalkan nisbah aspek mereka boleh mencabar. Artikel ini meneroka cara mengubah saiz dan memangkas imej dengan berkesan menggunakan gabungan teknik HTML dan CSS.

Saiz Semula Imej Latar Belakang

Sifat imej latar belakang membolehkan kami menentukan imej sebagai latar belakang elemen bekas. Dengan menetapkan sifat saiz latar belakang kepada penutup, imej akan mengubah saiz secara automatik agar muat dengan bekas sambil mengekalkan nisbahnya.

Saiz Semula Imej

tag boleh digunakan untuk membenamkan imej dalam halaman web. Dengan menentukan atribut lebar dan ketinggian, kami boleh menetapkan secara eksplisit dimensi yang dikehendaki. Walau bagaimanapun, ini mungkin memesongkan imej jika nisbah aspek asal tidak dikekalkan.

Teknik Penggabungan

Untuk mencapai kedua-dua saiz semula dan pemangkasan, kita boleh menggabungkan kaedah di atas. Kami mencipta elemen kontena dengan set sifat imej latar belakang dan saiz latar belakang yang dikehendaki. Di dalam bekas, kami meletakkan elemen dengan dimensi lebih kecil daripada bekas. Dengan melaraskan sifat jidar elemen, kita boleh memangkas imej dengan berkesan kepada saiz yang dikehendaki sambil mengekalkan nisbah aspek asalnya.

Contoh

Kod berikut menunjukkan cara mengubah saiz dan memangkas imej:

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

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

Salin selepas log masuk

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

Salin selepas log masuk

Dalam contoh ini, elemen bekas (

) dengan dimensi 200px kali 150px mengandungi imej (

) dengan dimensi 400px kali 300px. Dengan menetapkan limpahan kepada tersembunyi pada bekas, imej dipangkas dan dengan memanipulasi sifat jidar elemen, imej yang terhasil diubah saiz dan dipangkas dengan berkesan agar sesuai dengan bekas sambil mengekalkan nisbah bidangnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz dan Memangkas Imej Menggunakan HTML dan CSS Semasa Mengekalkan Nisbah Aspek?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!