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

Question

我完全不熟悉使用 Wordpress 创建网站，但我意识到 HTML 编码似乎比拖放更容易。我已经做了几件事来解决这个问题，但是没有任何事情完全符合我的意愿。

基本上我想要做的是拥有一张全尺寸图像（与上面对齐的段落宽度相同）。在那张图片下方，会有一个 space，然后会有两张并排的图片，中间有 space。它们将是上图宽度的一半，无论您如何将 Web 浏览器缩放到更大或更小，它都会保持相同的比例。然后我会在下面有同样的东西，下面有 3 张图片。

理想情况下，会有一个 100% 宽度的图像，下面接下来的两个图像各为 50%，中间有 space。接下来的三个是 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

Ideally, there would be an image thats 100% width, the next two below would be 50% each with space in between. The next three below would be 33%. All pictures would have even spacing in between. How can I do this?

CSS Flexbox 是实现您所描述内容的完美工具。

您可以：

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

flex 是一个 shorthand 值，flex-grow、flex-shrink、flex-basis.

的缩写

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

flex-grow 1 的优先级 - 即。当你不填满时成长 space
flex-shrink 0 的优先级 - 即。不缩水，不管有多少space有
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>

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

How Do I Adjust Image Sizing To Stay Proportional

html

css

photo

image

后续练习练习`flex`:

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

How Do I Adjust Image Sizing To Stay Proportional

html

css

photo

image

后续练习练习flex:

后续练习练习`flex`: