Bagaimanakah Saya Boleh Mengubah Saiz dan Memangkas Imej Hanya Menggunakan CSS?

Menggunakan CSS untuk Mengubah Saiz dan Memangkas Imej

Dalam artikel ini, kami akan meneroka cara mengubah saiz dan memangkas imej menggunakan CSS. Teknik ini membolehkan anda memaparkan imej dengan lebar dan ketinggian tertentu, walaupun imej asal mempunyai nisbah bidang yang berbeza.

Mengubah Saiz dan Memangkas Imej

Untuk mengubah saiz dan memangkas imej, anda boleh menggunakan gabungan sifat img dan imej latar belakang. Sifat img membolehkan anda mengubah saiz imej sambil mengekalkan nisbah bidangnya. Sifat imej latar belakang membolehkan anda memangkas imej kepada saiz yang dikehendaki.

Contoh

Pertimbangkan contoh berikut:

Imej ini bersaiz 800x600 piksel. Kami mahu memaparkannya sebagai imej 200x100 piksel.

Langkah 1: Saiz semula Imej

<br><img</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">style="width: 200px; height: 150px;" 
src="https://i.sstatic.net/wPh0S.jpg"></p>
<p>

Langkah ini mengubah saiz imej kepada 200x150 piksel, mengekalkan nisbah bidangnya.

Langkah 2: Memangkas Imej

style="background-image:
       url('https://i.sstatic.net/wPh0S.jpg'); 
width:200px; 
height:100px; 
background-position:center;">&amp;nbsp;</div></p>
<p>&lt ;/pre></p>
<p>Langkah ini memangkas imej diubah saiz kepada 200x100 piksel.</p>
<h3>Pendekatan Gabungan</h3>
<p>Anda boleh menggabungkan kedua-dua teknik ini untuk mencapai hasil yang diinginkan. Contohnya, kod berikut:</p>
<p><pra></p>
<pre class="brush:php;toolbar:false">.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

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

<div>