CSS图片限制宽高

用父元素包裹图片,然后限制超出隐藏,可以保证图片不变形并且只看到图片上部分

编写 HTML

1
2
3
<p class="img-container">
	<img src="#">
</p>

编写 CSS

1
2
3
4
5
6
7
8
9
10
p.img-container {
	width: 100%;
	height: 0;
	padding-bottom: 60%;
	overflow: hidden;
}

p.img-container img {
	width: 100%;
}