按照比例设置图片宽高自适应

按照比例设置图片宽高自适应

img{
	overflow:hidden
	width:100%
	height:0
	padding-bottom:31.25%
}

上面的31.25%是根据图片宽高比计算出的结果

有些人可能会问,我直接设置

	width:100%
	height:31.25%

这样不可以吗

注意:这样设置的height的31.25%相对的是父级的高度,而不是相对于自身宽度

还可以通过设置视口的方式实现

img{
	width:100%
	height:31.25vw
}

猜你喜欢

转载自blog.csdn.net/qq_47234456/article/details/124849720