TA貢獻(xiàn)1829條經(jīng)驗 獲得超13個贊
傳統(tǒng)做法是寫一個div，然后把圖片搞成這個div的背景圖，加個定位居中和cover做填充；或者你如果只用img的話也可以試試object-fit屬性，也是寬高取值直接cover就好。
布局可以用inline-block或者flex應(yīng)該都可以，如果間距都知道的話直接calc配合vw/vmin應(yīng)該就行了，寬高都用一樣的就行了。
TA貢獻(xiàn)1836條經(jīng)驗 獲得超5個贊
問題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，列表容器給出兩邊的留白，設(shè)置font-size:0;防止項之間的間隙，都不需要用flex的。
TA貢獻(xiàn)1795條經(jīng)驗 獲得超7個贊
問題1：你目前的情況是高度定，寬度不定，想要保證按原圖的比例展現(xiàn)圖片，使用js獲取圖片的原始寬、高，然后按原始寬高計算要展示的寬度，如下：
var img = new Image()
img.src = "url.png";
var naturalWidth = img.naturalWidth,
naturalHeight= img.naturalHeight;
// 假如要展示的圖片寬度是 showHeight，則要展示的圖片寬度如下
var showWidth = (showHeight / naturalHeight)*showHeight
問題2：在無法保證用戶上傳的圖片寬高比一致的情況，只能保證展示的是頂寬或者定高，這種布局建議使用flex
TA貢獻(xiàn)2080條經(jīng)驗 獲得超4個贊
看你的問題應(yīng)該主要是卡在了這個圖片寬高相等上邊了，這里有一個解決辦法，使用padding-bottom/top來獲取width。
用::after處理高度，撐開容器，::before渲染實際內(nèi)容
同時，外層容器使用margin: -$gap$ /2來實現(xiàn)移除四周的空隙
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;
}
舉報