Rumah >hujung hadapan web >tutorial css >Bagaimana untuk mengubah saiz imej secara automatik agar sesuai dengan bekas div menggunakan CSS?
Bagaimana untuk mengubah saiz imej secara automatik agar sesuai dengan bekas div menggunakan CSS?
- WBOYke hadapan
- 2023-09-09 22:01:011208semak imbas
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;
}
Contoh
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>
Output
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!