padding-bottom实现图片自适应

philadelphia 发布于2019-08-29 16:18 / 1636人阅读

摘要：那我们该怎么解决呢见代码为什么取值呢，因为图片的高为宽为。的撑起了的高度，这个百分度取值是相对于宽度的百分比，而不是父容器高度的百分比。此时我们就解决了图片的自适应问题。其实我们那还有另外一种写法实现，如下

1.需求场景

如我们在实现移动端banner轮播的时候，需要轮播图充满我们的轮播区域，通常我们的做法是banner设置固定宽高,然后超出隐藏，img设置max-width:100%;这样虽然能实现充满轮播区域，可是我们会发现，虽然宽度自适应了，高度并没有自适应，有时候我们会发现纵向上图片底部不见了，因为如果图片太高，当图片宽度100% 自适应的时候，高度也会按照宽度自适应的比例进行自适应(缩小或放大)，此时高度超出banner区域被隐藏了，视觉上会造成图片丢失的感觉。那我们该怎么解决呢？见代码


    
        
    


.banner{
    width: 700px;
    height: 700px;
    border: 1px solid #000;
    margin: 0 auto;
}
.cell{
    width:100%;
    height: 0;
    padding-bottom: 31.25%;
    overflow: hidden;
    background: red;
}
img{width: 100%;}

为什么padding-bottom 取值31.25% 呢，因为图片的高为200px,宽为640px。 200/640 既为31.25%。 cell的padding-bottom撑起了cell的高度，这个百分度取值是相对于cell宽度的百分比，而不是父容器banner高度的百分比。此时我们就解决了图片的自适应问题。
其实我们那还有另外一种写法实现，如下：

.banner{
    width: 700px;
    height: 700px;
    border: 1px solid #000;
    margin: 0 auto;
}
.cell{
    width:100%;
    height:31.25vw;
    overflow: hidden;
    background: red;
}
img{width: 100%;}

GPU云服务器云服务器图片自适应图片大小自适应 css图片自适应 asp图片自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113657.html

巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

摘要：那想要优化这一点，唯一的方法就是利用内容高度来撑开而非，这个方案跟消除浮动所用的方案非常相似给容器添加一个子元素伪元素，并把子元素伪元素的设为，使其实际高度相当于容器的宽度，如此一来，便能把容器的高度撑至与宽度一致了。一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是t...

wenzi 2019-08-28 18:28 评论0 收藏0
【复习】CSS实现宽高等比自适应容器

摘要：于是我们就需要实现一个宽度自适应，高度为宽度一半的容器。一思考如何实现这个问题类似于我们在移动端页面，上面有一张宽度的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。我们就可以利用这个特性，实现移动端的宽高等比自适应容器。在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。于是我们就需要实现一个宽度自适应，高度为宽...

habren 2019-08-30 15:44 评论0 收藏0
纯CSS实现侧边栏/分栏高度自动相等

摘要：一为何要分栏高度一致分栏高度一致的目的是更加美观。二纯实现侧边栏分栏高度自动相等这里直接介绍我认为的最佳的侧边栏分栏高度自动相等方法。一、为何要分栏高度一致？分栏高度一致的目的是更加美观。举两个例子吧。 ① 对于分栏布局，我们或许会用边框(border)进行分隔，就如鄙人博客的分栏：边框分栏张鑫旭-鑫空间-鑫生活此时最担心的问题就是高度不一致，尤其是无边框属性的分栏高度超过有边框...

li21 2019-08-29 12:43 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 评论0 收藏0