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

Question

您好，我正在尝试按照这张照片放置我的图像，但它们看起来不一样。谁能给我一个小费。 This is how it should look

这是我的代码

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

Answer 1

您可以将网站分为三栏。

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

您当然可以为每一列制作 CSS，分别称它们为“column1”等。

对于 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;
}

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

Positioning images so they match their width and height

html

css

positioning