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 id="Pendekatan-Gabungan">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>

Salin selepas log masuk

Kod ini akan mengubah saiz imej kepada 200x150 piksel dan kemudian memangkasnya kepada 200x100 piksel.

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