Html 定位图像，使其与宽度和高度匹配

您好，我正试图在这张图片后面定位我的图像，但它们看起来不一样。谁能给我小费吗。

这是我的密码

<img src="img3.png" alt="img3" width="30%" height="364px">

<img src="img2.png" alt="img2" width="30%" height="590px">

<img src="img3.png" alt="img3" width="30%" height="364px">

<img src="img2.png" alt="img2" width="30%" height="590px">

<img src="img3.png" alt="img3" width="30%" height="364px">

<img src="img2.png" alt="img2" width="30%" height="590px">

---

您可以将站点分为三列

第1列包含一个小图像和一个高图像，第2列和第3列也是如此

那么应该是这样的：

<div class="columns">
<img class="imgcolumnsmall" src="img3.png" alt="img3" width="30%" height="364px">

<img class="imgcolumntall" src="img2.png" alt="img2" width="30%" height="590px">
</div>

<div class="columns">
<img class="imgcolumnsmall" src="img3.png" alt="img3" width="30%" height="364px">

<img  class="imgcolumntall"src="img2.png" alt="img2" width="30%" height="590px">
</div>

<div class="columns">
<img class="imgcolumnsmall" src="img3.png" alt="img3" width="30%" height="364px">

<img class="imgcolumntall" src="img2.png" alt="img2" width="30%" height="590px">
</div>

---

通常情况下，你会使用一个反应灵敏的网格，并将你的图像与之匹配。Flexbox很适合。你用CSS标记了你的问题，但我没有看到任何问题。CSS将修复此问题。请选中“弹性框包装列布局”：

.columns {
float:left;
overflow: hidden;
background-color: #ff00ff;
}

img.imgcolumntall {
display: inline;
width: 30%;
height: 590px;
}

img.imgcolumnsmall {
display: inline;
width: 30%;
height: 364px;
}