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

时间:2023-01-08 15:15:36

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

效果演示:

demo点查看效果

需求说明:

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

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

结论说明:

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

一图说明5种样式区别

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

样式代码说明:

第一种样式图集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文件:

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

结论:

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

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

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