5种样式实现div容器中三图摆放实例对比说明

立即下载用AI写一个

发布时间：2017-09-06

7人 | 浏览：4875次 | 收藏 |

技术：html5

概述

5种样式实现div容器中三图摆放实例对比

详细

####效果演示：
[demo点查看效果](https://mjs.sinaimg.cn/wap/online/cms/article/cm/pics.html)
####需求说明：
如下图所示为设计图，希望在图片上传无规则无规律的情况下实现设计。
![](/contentImages/image/jianshu/1094385-2ba1656b992dd13d.jpg)
####结论说明：
**并没有完美解决上传图片尺寸无规则但显示完美展现设计图的方案**，（ps：如果小伙伴们有更好的方法，请联系我~）。题中说采用了5种样式，其中前4种为css样式处理，第5种为通过js处理。

**一图说明5种样式区别**
![](/contentImages/image/jianshu/1094385-a189049ff4613c61.jpg)
####样式代码说明：
>第一种样式图集1

第一种样式是采用了`background`的方式，把图片作为背景的url,使用`background-size:cover`使图片覆盖，位置选用了居中，图片撑开选用了占位图；css左右采用`flex`分割。（请忽略和设计图不一样非2:1分割的问题，因为没有找到2:1的占位图……）;示例为上方的图集1，可以看出图片是居中覆盖，且随着屏幕的增大而不改变图片，但是由于图片居中所以会显示不全吗，且针对竖图时截的莫名其妙。

主要的html结构(左边容器):
```
<div class="wrap_hd">
    <div class="left_hd">
        <div class="img_wrap " >
            <div  class="real_img" style="background-image: url(http://www.sinaimg.cn/dy/slidenews/2_img/2016_27/76980_1845028_808632.jpg);"></div>
            ![](/contentImages/image/jianshu/1094385-c20207eb99229aac.jpg)
        </div>
    </div>
    <div class="right_hd">
        <div class="img_wrap">
            <div class="real_img height_auto" style="background-image: url(http://m1.sinaimg.cn/maxwidth.2880/m1.sinaimg.cn/1e072ed856226419f37c4e24b4e91b81_683_1024.jpg);"></div>
            ![](/contentImages/image/jianshu/1094385-fdf2080d8682860e.jpg)

</div>
        <div  class="img_wrap hdphoto_icon ">
            <div class="real_img" style="background-image: url(http://www.sinaimg.cn/dy/slidenews/4_img/2016_29/704_1970744_807346.jpg);"></div>
            ![](/contentImages/image/jianshu/1094385-254c783e492129be.jpg)
        </div>
    </div>     
</div>
```
涉及的css：
```
.wrap_hd{
    clear: both;
    overflow: hidden;
    display: box;
    display: -webkit-box;
    display: flex;
    margin-top: 5px;
}
.left_hd{
    box-flex:1;
    -webkit-box-flex:1;
    flex:1;
    margin-right: 5px;
}
.left_hd .img_wrap{
    overflow: hidden;
    position: relative;
}
.right_hd{
    box-flex:1;
    -webkit-box-flex:1;
    flex:1;
}
.right_hd .img_wrap{
    position: relative;
    overflow: hidden;
}
.wrap_hd .real_img{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
}
.right_hd div{   
    overflow: hidden;

}
.right_hd .img_wrap:first-child{
    margin-bottom: 4px;
}
.right_hd .img_wrap:last-child{
}
.wrap_hd img{
    max-width: none;
    width: 100%;
} 
```

>第二种样式图集2

第二种样式及以下html结构与第一种样式不同，以下样式都是通过限制元素`img`及其父元素的宽高来限制图片
图集样式2是通过给图片限高固定200，而宽度按图来定做的，优点是高度保持不变，且图片不会被拉伸，缺点就是图片无法铺满而导致的视觉不好看。

主要的html如下：
```
<div class="wrap_hd1">
    <div class="left_hd1">
        ![](/contentImages/image/jianshu/1094385-9bae93a7605807f0.jpg)
    </div>
    <div class="right_hd1">
        <div >                                      
            ![](/contentImages/image/jianshu/1094385-f5b4e25b491bda73.jpg)
        </div>
        <div>
            ![](/contentImages/image/jianshu/1094385-be935c50d510a3d0.jpg)
        </div>
    </div>     
</div>
```
主要的css为：
```
.wrap_hd1 .left_hd1 img{
    width: auto;
    height:200px;
}
.wrap_hd1 .right_hd1 img{
    width: auto;
    height:98px;
}
```
>第三种样式图集3

第三种样式是高度保持固定200px，而宽度会被铺满，如图集3，一个明显的缺点就是过宽时图片会被拉伸。感觉项目中不会采用这种方式的。html同图集2.

主要css：
```
.wrap_hd1 .left_hd2 img{
    width: 100%;
    height:200px;
}
.wrap_hd1 .right_hd2 img{
    width: 100%;
    height:98px;
}
```

>第四种样式图集4

第四种样式如图集4，主要区别为高度采用`max-height`这样会使竖向无法对齐，宽度如果采用`width:100%`图片会拉伸，宽度如果采用`width:auto`图片会有空隙。

主要css：
```
.wrap_hd1 .left_hd3 img{
    width: 100%;
    max-height:200px;
}
.wrap_hd1 .right_hd3 img{
    width: 100%;
    max-height:98px;
}
```
>第五种样式图集5

第五种样式在demo中有两个，一种是左边为横图图集，一种是左边为竖图图集，区别在于横图截取右侧部分，竖图截取下侧部分。js主要过程就是图片加载完成后获取当前图片的宽高，以及其父容器的宽高，两者相对比来决定当前容器中的图以定宽还是定高。缺点是过宽会有空隙。
主要js：
```
$('.j_hdphoto img').each(function(){
    var self = this,
        box_width,
        box_height,
        box_scale,
        img_width,
        img_height,
        img_scale;
    var img = new Image();
    console.log(self.src);
    img.onload=function(){
        box_width = $(self).parent().width();
        box_height = $(self).parent().height() != 0?$(self).parent().height():1;
        box_scale = box_width/box_height;//父容器
        img_width = $(self).width();
        img_height = $(self).height() != 0?$(self).height():1;
        img_scale = img_width/img_height;//图片
        if(box_scale<img_scale){
            //图片太宽
            if(img_scale>1){
                //横图
                $(self).css('height',box_height);
            }else{
                //竖图
                $(self).css('width',box_width);
            }
        }else{
            //图片太高
            if(img_scale>1){
                //图片是个横图
                $(self).css('height',box_height);
                
            }else{
                //竖图
                $(self).css('width',box_width);
            }
            
        }
        img.onload = null;
    }
    img.src = self.src;
})
```
####项目文件截图：
只有一个HTML文件：
![](/contentImages/image/20170906/ucNv2tszqk7ptYC2R2N.png)
####结论：
几种pk一下，感觉图集1、图集5还是比较可取的，做一个这样的对比主要是想说以后产品要求这个图就可以一个demo解决啦！有错误之处还请多多指教。

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

5种样式实现div容器中三图摆放实例对比说明

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子