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

比眉伴天荒 2022-05-30 03:42 24阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/11593.html][http_www.demodashi.com_demo_11593.html]

#### 效果演示： ####

[demo点查看效果][demo]

#### 需求说明： ####

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

#### 结论说明： ####

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

**一图说明5种样式区别**  
![1240 1][]

#### 样式代码说明： ####

> 第一种样式图集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>
                ![](http://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>
                ![](http://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>
                ![](http://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">
            ![](http://upload-images.jianshu.io/upload_images/1094385-9bae93a7605807f0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </div>
        <div class="right_hd1">
            <div >                                      
                ![](http://upload-images.jianshu.io/upload_images/1094385-f5b4e25b491bda73.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            </div>
            <div>
                ![](http://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文件：  
![ucNv2tszqk7ptYC2R2N.png][]

#### 结论： ####

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

> 代码地址如下：  
> [http://www.demodashi.com/demo/11593.html][http_www.demodashi.com_demo_11593.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_11593.html]: http://www.demodashi.com/demo/11593.html
[demo]: https://mjs.sinaimg.cn/wap/online/cms/article/cm/pics.html
[1240]: /images/20220530/3e358c80cb0b427094728ee6ac59792a.png
[1240 1]: /images/20220530/2eeebb46788544de9166ee5fa5c7c31e.png
[ucNv2tszqk7ptYC2R2N.png]: /images/20220530/2448dd8c53474647ac39dde5d3c38812.png