Untuk mengubah saiz imej secara automatik agar sesuai dengan bekas div, kami menetapkan CSS fproperty atau tag img berikut -
max-width: 100%; max-height: 100%;
Pertama, kami tetapkan imej menggunakan tag img dalam div mydiv -
<div id="myDiv"> <img src="https://www.tutorialspoint.com/behave/images/behave.jpg"> </div>
Kami menetapkan mydiv kepada ketinggian dan lebar automatik untuk membolehkan saiz semula automatik div -
#myDiv {
height: auto;
width: auto;
border: 2px solid blue;
}
Imej dalam mydiv kini mempunyai ciri CSS berikut dengan lebar maks dan ketinggian maks ditetapkan untuk membolehkan saiz semula automatik tanpa sebarang masalah -
#myDiv img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
Sekarang mari lihat contoh lengkap mengubah saiz imej secara automatik agar sesuai dengan bekas div menggunakan CSS -
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
height: auto;
width: auto;
border: 2px solid blue;
}
#myDiv img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="https://www.tutorialspoint.com/behave/images/behave.jpg">
</div>
</body>
</html>
Atas ialah kandungan terperinci Bagaimana untuk mengubah saiz imej secara automatik agar sesuai dengan bekas div menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
