5种样式实现div容器中三图摆放实例对比说明
效果演示：
需求说明：
如下图所示为设计图，希望在图片上传无规则无规律的情况下实现设计。
结论说明：
并没有完美解决上传图片尺寸无规则但显示完美展现设计图的方案，（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>
</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>
</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>
</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">
</div>
<div class="right_hd1">
<div >
</div>
<div>
</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容器中三图摆放实例对比说明
注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权
