如何调整图像大小以保持比例

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 of 30% - 在增长或缩小之前，使用父级的 30% 作为起始宽度

工作示例：

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

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

<div class="image-container">

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

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


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

</div>

---

后续练习练习flex:

Flexbox Froggy - a game for learning flexbox

Answer 2

另一个例子，使用flex。我的解决方案的缺点是图像的左右两侧会有一些间距，但 Rounin 的解决方案也是如此。

说明在下面的 CSS 代码中。

.container {
  display: flex;    /* display all children in a one-dimensional list */
  flex-wrap: wrap;  /* wrap child elements if it's needed */
}

.container > img {
  width: calc(100%/3);
  padding-bottom: 1rem;   /* 1rem = the font size of the document */
  padding-left: 0.5rem;   /* flex can take padding into consideration ... */
  padding-right: 0.5rem;  /* ... in comparison to using margin but ... */
  box-sizing: border-box; /* ... we need to set this value too */
}

.container > img:nth-child(1) {   /* first child in .container */
  width: 100%;
}

.container > img:nth-child(2),
.container > img:nth-child(3) {   /* second and third child in container */
  width: 50%;
}

<p class="has-text-align-justify">Hello world</p>

<div class="container">
  <img src="https://i.picsum.photos/id/11/200/200.jpg">

  <img src="https://i.picsum.photos/id/22/200/200.jpg">
  <img src="https://i.picsum.photos/id/33/200/200.jpg">
  
  <img src="https://i.picsum.photos/id/45/200/200.jpg">
  <img src="https://i.picsum.photos/id/58/200/200.jpg">
  <img src="https://i.picsum.photos/id/613/200/200.jpg">
</div>