html img 图片不拉伸,固定长宽的img标签如何保持里面的图片不缩放

一、将图片作为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;

}