css 图片按固定比例显示解决方案

蓝阳

于 2016-06-24 00:37:47 发布

阅读量2.3k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Forrest_Chen/article/details/51748421

版权

1 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现固定长宽比图片容器的方法。通过设置容器的高度为0并利用padding-bottom属性来达到期望的比例，使图片能够自适应填充容器，同时保持原始宽高比不变。此方案适用于需要固定比例展示图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML:
<p class="container">
  <img src="xxx.png">
</p>

CSS:
p.container {
  width: 100%;
  height: 0;
  padding-bottom: 120%;
  overflow: hidden;
}

p.container img {
  width: 100%;
}

代码不多，就不贴效果图了，长宽比为100%比120%，即5:6