CSS图片固定宽高比例显示

244月

代码：

HTML: <p class=“image-container”> <img src=“xxx.png”> </p>

CSS:

p.image-container { width: 100%; height: 0; padding-bottom: 60%; overflow: hidden; }
p.image-container img { width: 100%;}

这样做图片保持原比例，只显示上方 40%

注：这样的写法对于高度比较高的图片合适，对于比较偏窄的图片只能保证宽度的100%，高度就会有空白

分享到：

OnlyGrape葡提子,英文建站博客英文网站建设，用户体验设计，前段技术研究，seo网站推广