企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

Css百分比如何实现固定图片自适应布局

HTML CSS 码云 45℃ 0评论
目录
[隐藏]

最近在做一个项目时,要求图片在div容器中布局且能够在不同的分辨率的设备中自适应设备,并且在缩放时不影响每个图片的固定大小,如果按照一般的实现思路我们可以在pc端上能够正常满足要求,但是如果到了移动设备中就是让人很搞笑了。

先来看一下效果对比图:

Css百分比如何实现固定图片自适应布局

其他设备上:

Css百分比如何实现固定图片自适应布局

所以,我在网上搜集很多资料,终于找到了一种可以很好实现项目需求的方式,这要感谢张鑫旭大牛给提供的方法思路了。好了,闲话不多说,接着往下看。

Margin和Padding是我们在网页设计经常使用到的CSS样式,他们分别是间距和填充,一个作用于盒子外面,一个作用于盒子里面,默认的情况下,这些属性的值都会被计算在盒子的面积里面,在网页开发中的流体布局或者是响应式布局中,经常将Margin和Padding设置成百分数,那么到底这个百分数是多少,他是如何计算的呢?

CSS百分比padding都是相对宽度计算的

我们以padding为例,任意方向的百分比都可以让我们轻松实现固定比例的块级容器,假设现在有个<div>元素:

div { padding: 50%; }

或者

div { padding: 100% 0 0; }

或者

div { padding-bottom: 100%; }

那么<div>元素的尺寸就是一个宽高1:1的正方形,无论其父容器宽度是多少,这个<div>元素总能保持比例不变。

这种能固定比例的特性什么作用呢?

对于绝大多数都布局,我们并不要求非要比例固定,但是有一种情况例外,那就是图片,因为图片原始尺寸它是固定的。在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能是不确定的,例如手机端的一个通栏广告,iPhone7下宽度是375,iPhone7Plus下是414,还有360等尺寸,此时需要的不是对图片进行固定尺寸设定,而是比例设定。

就像我这个项目,图片列表都是内联的<img>,通过百分比padding就可以轻松的实现的,我们需要在图片的外面定义一个固定比例的<div>容器,例如下面的HTML结构:

<div class="banner">
  <img src=""banner.jpg>
</div>

CSS样式

.banner {
    padding: 15.15% 0 0;
    position: relative;
}
.banner > img {
    position: absolute;
    width: 100%; height: 100%;
    left: 0; top: 0;
}

这样你的效果就能轻松地实现了。
如果大家遇到这种需求场景,没有比百分比padding布局更好的做法!
完整代码附上:

HTML代码:

<div class="works-wrap">
    <ul class="works-con">
        <li class="works-item">
            <div class="works-item-t">
                <img src="">
            </div>
            <div class="works-item-b">
                <h4 class="works-item-h"></h4>
                <div class="works-btn-box"><a href class="works-btn"></a></div>
            </div>
        </li><li class="works-item">
            <div class="works-item-t">
                <img src="./150x200.png">
            </div>
            <div class="works-item-b">
                <h4 class="works-item-h"></h4>
                <div class="works-btn-box"><a href class="works-btn"></a></div>
            </div>
        </li>
        ...
    </ul></div>

CSS代码:

.works-wrap {
    max-width: 1000px;
    margin: auto;
}
.works-con {
    padding: 0;
    margin: 0 -.5em;
    list-style: none;
    overflow: hidden;
}
.works-item {
    display: inline-block;
    min-width: 150px;
    width: calc(20% - 1em);
    margin: 20px .5em 0;
    background: AppWorkspace;
    vertical-align: top;
}
.works-item-t {
    padding-bottom: 133%;
    position: relative;
}
.works-item-t > img {
    position: absolute;
    width: 100%;
    height: 100%;
}
.works-item-b {
    margin: .5em .5em 1em;
}
.works-item-h {
    margin: 10px 0 0;
    color: CaptionText;
    font-size: 100%;
}
.works-btn-box {
    padding-top: 10px;
}
.works-btn {
    display: inline-block;
    padding: 0 8px;
    background: DarkGoldenrod;
    color: White;
}
@media screen and (max-width: 1000px) {
    .works-item {
        width: calc(25% - 1em);
}}
@media screen and (max-width: 768px) {
    .works-item {
        width: calc(33.3% - 1em);
}}
@media screen and (max-width: 580px) {  
    .works-item {
        width: calc(50% - 1em);
}}
@media screen and (max-width: 400px) {  
    .works-item {
        width: calc(100% - 1em);
    }}

此demo难点就是图片自适应同时保持比例,以及页面刷新的时候没有布局稳固不晃动,其核心HTML和CSS代码如下:

<div class="works-item-t">
    <img src="./150x200.png">
</div>
.works-item-t {
    padding-bottom: 133%;
    position: relative;
}
.works-item-t > img {
    position: absolute;
    width: 100%; height: 100%;
}

转载请注明:码云笔记 » Css百分比如何实现固定图片自适应布局

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址