手机端根据手机宽度设定高度（宽高相等）

最新推荐文章于 2022-10-16 11:55:22 发布

转载最新推荐文章于 2022-10-16 11:55:22 发布 · 2.6k 阅读

css 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的响应式图片展示方法。通过设置特定的div容器样式及内部图片的位置属性，使得图片能够根据屏幕宽度自动调整大小，保持良好的视觉效果。

html
    <div class="image-header">
        <img :src="imgFoodUrl+food.image_path" alt="">
    </div>
css
.image-header{
            position:relative;
            width:100%;
            height:0;
            padding-top:100%;
            img{
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
            }
        }