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

代码地址如下：
http://www.demodashi.com/demo/11593.html

效果演示：

demo点查看效果

需求说明：

如下图所示为设计图，希望在图片上传无规则无规律的情况下实现设计。

结论说明：

并没有完美解决上传图片尺寸无规则但显示完美展现设计图的方案，（ps：如果小伙伴们有更好的方法，请联系我~）。题中说采用了5种样式，其中前4种为css样式处理，第5种为通过js处理。

一图说明5种样式区别

样式代码说明：

第一种样式图集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>
            ![](//upload-images.jianshu.io/upload_images/1094385-c20207eb99229aac.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </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>
            ![](//upload-images.jianshu.io/upload_images/1094385-fdf2080d8682860e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

        </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>
            ![](//upload-images.jianshu.io/upload_images/1094385-254c783e492129be.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </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">
        ![](//upload-images.jianshu.io/upload_images/1094385-9bae93a7605807f0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </div>
    <div class="right_hd1">
        <div >
            ![](//upload-images.jianshu.io/upload_images/1094385-f5b4e25b491bda73.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </div>
        <div>
            ![](//upload-images.jianshu.io/upload_images/1094385-be935c50d510a3d0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </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文件：

结论：

几种pk一下，感觉图集1、图集5还是比较可取的，做一个这样的对比主要是想说以后产品要求这个图就可以一个demo解决啦！有错误之处还请多多指教。5种样式实现div容器中三图摆放实例对比说明

代码地址如下：
http://www.demodashi.com/demo/11593.html

注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权