CSS图片宽度设置百分比 , 高度同宽度相同

最新推荐文章于 2024-04-03 10:05:26 发布

原创最新推荐文章于 2024-04-03 10:05:26 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用CSS实现图片长宽相等并自适应屏幕的方法。通过设置div的高度为0，padding-bottom为50%，使图片能保持原始比例且充满整个屏幕。

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

在图片长宽不相等的情况下，想将长宽设置为相等并且自适应屏幕，可以通过 js 的方式进行设置并通过监听 resize 来实时更新，但是这种方式很麻烦。

<div class='box'>
    <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1504583607&di=3f5b4637a7b70d018ad9588c78971956&src=http://pic.baike.soso.com/p/20140327/20140327161206-845392828.jpg">
</div>

.box{
    position: relative;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
}
.box img {
    position:  absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}