一个图片布局加自适应的请教探讨

Question

问题1. 对下图这个布局，先说需求，图片是用户上传，需要正方形展示，面对用户上传图片的比例不定，请问会怎样让它完美展现在自己的盒子里呢？

问题2. 只用css实现这个布局， 三张图片宽度平分宽度，间距保持10px不变，用flex?百分比?vw？ 我试过flex和百分比加calc()和vw 图片高度和宽度怎样保持一致呢?

我想了解一下大家的经验和方式 谢谢大家

Answer 1

1. 传统做法是写一个div，然后把图片搞成这个div的背景图，加个定位居中和cover做填充；或者你如果只用img的话也可以试试object-fit属性，也是宽高取值直接cover就好。
2. 布局可以用inline-block或者flex应该都可以，如果间距都知道的话直接calc配合vw/vmin应该就行了，宽高都用一样的就行了。

Answer 2

问题1：图片用background，background-size:cover，如果涉及懒加载或者不能用background，不太好搞，要去比较宽高或者剪裁了，一般都是后端剪裁好尺寸传回来。

如果同意展示图片全部，上下或左右有空白的话也可以像下面这样。

.parent{
    width:200px;
    height:200px;
    position:relative;
}
.child{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

问题2：列表项容器padding:5px;box-sizing:border-box;display:inline-block，列表容器给出两边的留白，设置font-size:0;防止项之间的间隙，都不需要用flex的。

Answer 3

//css

.box {
  width: 500px;
}

.img-box {
  width: 33.33%;
  height: 0;
  padding-bottom: 33.3%;
  box-sizing: border-box;
  float: left;
  border-right: 10px solid #ffffff;
  margin-bottom: 10px;
  background: #000 no-repeat center center;
  background-size: contain;
}

.img-box:nth-child(3n) {
  border-right: none;
}

//html

<div class="box">
    <div class="img-box" style="background-image: url(http://pic1.win4000.com/wallpaper/5/532931489604e.jpg)"></div>
    <div class="img-box" style="background-image: url(http://img.zcool.cn/community/0108185543f09e0000019ae906d8f6.jpg@1280w_1l_2o_100sh.jpg)"></div>
    <div class="img-box" style="background-image: url(http://img.zcool.cn/community/01626057ff29a1a84a0d304f3b5991.jpg@1280w_1l_2o_100sh.jpg)"></div>
    <div class="img-box" style="background-image: url(http://pic1.win4000.com/wallpaper/5/532931489604e.jpg)"></div>
    <div class="img-box" style="background-image: url(http://img.zcool.cn/community/0108185543f09e0000019ae906d8f6.jpg@1280w_1l_2o_100sh.jpg)"></div>
    <div class="img-box" style="background-image: url(http://img.zcool.cn/community/01626057ff29a1a84a0d304f3b5991.jpg@1280w_1l_2o_100sh.jpg)"></div>
  </div>

Answer 4

问题1：你目前的情况是高度定，宽度不定，想要保证按原图的比例展现图片，使用js获取图片的原始宽、高，然后按原始宽高计算要展示的宽度，如下：
var img = new Image()
img.src = "url.png";
var naturalWidth = img.naturalWidth,

naturalHeight= img.naturalHeight;

// 假如要展示的图片宽度是 showHeight，则要展示的图片宽度如下
var showWidth = (showHeight / naturalHeight)*showHeight
问题2：在无法保证用户上传的图片宽高比一致的情况，只能保证展示的是顶宽或者定高，这种布局建议使用flex

Answer 5

看你的问题应该主要是卡在了这个图片宽高相等上边了，这里有一个解决办法，使用padding-bottom/top来获取width。
用::after处理高度，撑开容器，::before渲染实际内容

同时，外层容器使用margin: -$gap$ /2来实现移除四周的空隙

Online Demo: https://codepen.io/Jiasm/pen/...
这里用的是background-color模拟，你要用图片的话，直接写成background-url+background-size: 100% 100%即可

.wrap {
    border: 1px solid blue;
    width: 400px;
}

.border {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: -5px; /* fill panel */
}

.item {
    width: 33.33%;
    position: relative;
}

.item::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 100%;
}

.item::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: red;
}