1. 傳統(tǒng)做法是寫(xiě)一個(gè)div，然后把圖片搞成這個(gè)div的背景圖，加個(gè)定位居中和cover做填充；或者你如果只用img的話也可以試試object-fit屬性，也是寬高取值直接cover就好。
2. 布局可以用inline-block或者flex應(yīng)該都可以，如果間距都知道的話直接calc配合vw/vmin應(yīng)該就行了，寬高都用一樣的就行了。

看你的問(wèn)題應(yīng)該主要是卡在了這個(gè)圖片寬高相等上邊了，這里有一個(gè)解決辦法，使用padding-bottom/top來(lái)獲取width。
用::after處理高度，撐開(kāi)容器，::before渲染實(shí)際內(nèi)容

同時(shí)，外層容器使用margin: -$gap$ /2來(lái)實(shí)現(xiàn)移除四周的空隙

Online Demo: https://codepen.io/Jiasm/pen/...
這里用的是background-color模擬，你要用圖片的話，直接寫(xiě)成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;
}

問(wèn)題1：你目前的情況是高度定，寬度不定，想要保證按原圖的比例展現(xiàn)圖片，使用js獲取圖片的原始寬、高，然后按原始寬高計(jì)算要展示的寬度，如下：
var img = new Image()
img.src = "url.png";
var naturalWidth = img.naturalWidth,

naturalHeight= img.naturalHeight;

// 假如要展示的圖片寬度是 showHeight，則要展示的圖片寬度如下
var showWidth = (showHeight / naturalHeight)*showHeight
問(wèn)題2：在無(wú)法保證用戶上傳的圖片寬高比一致的情況，只能保證展示的是頂寬或者定高，這種布局建議使用flex

問(wèn)題1：圖片用background，background-size:cover，如果涉及懶加載或者不能用background，不太好搞，要去比較寬高或者剪裁了，一般都是后端剪裁好尺寸傳回來(lái)。

如果同意展示圖片全部，上下或左右有空白的話也可以像下面這樣。

.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%);
}

問(wèn)題2：列表項(xiàng)容器padding:5px;box-sizing:border-box;display:inline-block，列表容器給出兩邊的留白，設(shè)置font-size:0;防止項(xiàng)之間的間隙，都不需要用flex的。

//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>