通过CSS样式padding实现固定比例div、图片布局
2023-05-14 本文已影响0人
初心不改_0055
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.image {
width: 480px;
position: relative;
margin-bottom: 20px;
}
.image::before {
content: "";
display: block;
padding-top: 40%;
}
.image img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<p>固定比例</p>
<div class="image">
<img src="https://img.haomeiwen.com/i12392780/65dcd002e0db4ac8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
</div>
<p>图片自身比例</p>
<div>
<img src="https://img.haomeiwen.com/i12392780/65dcd002e0db4ac8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
</div>
</body>
</html>
效果
image.png
