跟进练习`<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>`：

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的{{1}}值

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: 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>`：

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>

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

2 个答案: