图片固定宽高比

困困的果果头

于 2023-01-09 18:16:48 发布

阅读量351

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： html 前端 css vue

本文链接：https://blog.csdn.net/qq_36687211/article/details/128618983

css 专栏收录该内容

7 篇文章

订阅专栏

这段代码展示了如何使用HTML的`<div>`和LessCSS来创建一个保持16:9比例的图片容器。通过设置`padding-bottom`为56%，可以保持元素的高度与宽度的16:9比例。同时，内部的`<el-image>`组件被设置为绝对定位，填充整个容器并添加了圆角效果。

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

图片固定比例
16：9
html

<div class="itemImg">
   <el-image  :src="item.cover" fit="cover" />
</div>

less

.itemImg{
     width: 100%;
     position: relative;
     height: 0;
     padding-bottom: 56%;
     cursor: pointer;
     .el-image{
         position: absolute;
         width: 100%;
         height: 100%;
         border-radius: 8px;
     }
 }