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

debugcn 发表于 Dev

新网站创建者

对于使用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;">

鲁宁

理想情况下，图像的宽度应为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: 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>