CSS中图片宽度100%时如何根据图片宽度设置成比例的高度

原创已于 2023-07-09 17:58:25 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #java

于 2023-07-04 15:23:14 首次发布

博客主要提及了CSS，CSS是前端开发中用于样式设计的重要技术，能让网页呈现出丰富多样的视觉效果。

<div class="item>
    <img src="beyond.jpg>
</div>

css

.item{
    width:100%;
	height:100%;
	padding-bottom: 100%; /* 这个值可以调成自己想要的比值, 比如4:3的话就设置75% */
    position: relative;
}
.item img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		position: absolute;
	}
}