一、将图片作为dom元素

方案1：给图片周围留白

像这样，1：1的图片撑满图片区域，其他比例图片周围留白(粉~)：如果图片高度大于宽度，则左右留白，高度小于宽度，上下留白

实现代码：

1

body{

margin: 0;

background-color: #555;

}

#box {

display: flex;

justify-content: start;

width: 500px;

flex-wrap: wrap;

margin: 20px auto;

background-color: #555;

}

#box div {

display: flex;

justify-content: center;

align-items: center;

width: 100px;

height: 100px;

background-color: pink;

margin-bottom: 5px;

}

#box div+div:not(:nth-child(5n)) {

margin-left: 5px;

}

// 注意：要在图片加载完之后才能获取到图片对象

window.onload = function() {

var box = document.getElementById("box");

var imgs = box.getElementsByTagName('img');

for (let i = 0; i < imgs.length; i++) {

var w = imgs[i].offsetWidth,

h = imgs[i].offsetHeight

w > h ? imgs[i].style.width = '100%' : imgs[i].style.height = '100%'

}

}

方案2：按所需尺寸截取图片中间部分，就像苹果相册的做法，不过这样会裁剪掉图片的一部分...hhhh，本来还想重写的，用的flex布局，然后发现上面代码只要改两个地方就能实现效果了:-D

给css里面的#box div添加overflow:hidden;属性;

将js里面w > h改成w < h;

效果图如下：

二、将图片作为背景图

图片和上面一样的我就不贴了

1

body{

margin: 0;

background-color: #555;

}

#box {

display: flex;

justify-content: start;

width: 500px;

flex-wrap: wrap;

margin: 20px auto;

background-color: #555;

}

#box div {

width: 100px;

height: 100px;

background-color: pink;

margin-bottom: 5px;

background-position: 50% 50%;

background-size: contain;

background-repeat: no-repeat;

}

#box div+div:not(:nth-child(5n)) {

margin-left: 5px;

}

var box = document.getElementById('box');

var imgs = ['33.jpg', 'avator.jpg', 'he.jpg', 'WechatIMG42.jpeg', 'timg.jpeg'];

for(var i = 0; i < imgs.length; i++){

var div = document.createElement("div");

div.style.backgroundImage = `url(${imgs[i]})`

box.appendChild(div, box)

}

这里其实只改变了#box div中background的部分样式，题主可以自己研究一下，上面的样式实现的是方案一，将#box div的background-size改为background-size: cover;就是方案二的效果咯