设置一个宽高相同或等比例的图片，宽度是不固定，恒为页面宽度100%

最新推荐文章于 2023-09-01 14:23:08 发布

最新推荐文章于 2023-09-01 14:23:08 发布 · 3.3k 阅读

文章标签：

#宽高相同的图片

css 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种在移动端实现图片自适应布局的方法，通过CSS设置相对定位和绝对定位结合特定的宽高比，使得图片能够根据屏幕大小自动调整尺寸。

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

在移动端，会遇到此类问题，简单的问题，css即可搞定

html

<div class="foodImg">
    <img :src="food.image"/>
</div>

css

.foodImg{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%; 宽高比例为1：1
    //padding-top: 70%; 宽高比例为10：7
}
.foodImg img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}