如何调整图像尺寸以保持比例

Question

我对使用Wordpress创建网站是完全陌生的，但已经意识到HTML编码似乎比拖放容易。我已经做了几件事来解决该问题，但是没有任何事情可以完全按照我的意愿进行。

[我基本上要做的是有一幅全尺寸图像（与上面的合理段落宽度相同）。在该单个图像下方，将有一个空间，然后将有两个图像并排，中间有空间。它们将是上面图像宽度的一半，并且无论您如何缩放Web浏览器的大小，它都将保持相同的比例。然后，我将在下面的3张图片中看到相同的内容。

理想情况下，图像的宽度为100％，下面的下两个图像之间的间隔为50％。接下来的三个将是33％。所有图片之间的间距都是均匀的。我该怎么办？

以下是我尝试过的一些方法，但都没有解决：

1）

<p class="has-text-align-justify">
<img class="wp-image-460" style="width: NaNpx;" src="https://..." alt="">

<img class="wp-image-458" style="width: 387px;" src="..." alt=""> &nbsp;

<img class="wp-image-459" style="width: 387px;" src="..." alt="">

</p>

2）

<img src="https://..." style="float: left; width: 49%; margin-right: 1.0em; margin-bottom: 1.0em;">

<img src="https://..." style="float: left; width: 49%; float: right; margin-bottom: 1.0em;">

Answer 1

理想情况下，图像的宽度为100％，下面的两个将各占50％，中间有空格。接下来的三个是33％。所有图片之间的间距都是均匀的。我能怎么做这个？

CSS Flexbox是实现您所描述的理想工具。

您可以：

• 创建三个容器，每个容器带有display: flex
• 在第一个容器中放置一个图像，在第二个容器中放置两个图像，在第三个容器中放置三个图像
• 给每个图像一个flex的flex: 1 0 30%值

[flex是简写值，是flex-grow，flex-shrink，flex-basis的缩写。

这里指令flex: 1 0 30%的意思是：

• flex-grow的1优先级-即当您不填满空间时就会成长
• flex-shrink的0优先级-即不要缩小，无论有多少空间]
• flex-basis的[30%-使用父母的30%作为开始宽度，然后再增大或缩小

工作示例：

.image-container-row {
  display: flex;
}

img {
  flex: 1 0 30%;
  height: 100px;
  margin: 6px;
  border: 1px solid red;
}

<div class="image-container">

<div class="image-container-row">
<img class="wp-image-455" alt="">
</div>

<div class="image-container-row">
<img class="wp-image-456" alt="">
<img class="wp-image-457" alt="">
</div>


<div class="image-container-row">
<img class="wp-image-458" alt="">
<img class="wp-image-459" alt="">
<img class="wp-image-460" alt="">
</div>

</div>