时间戳

首页 > 解决方案 > 如何调整图像大小以保持比例

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

问题描述

我对使用 Wordpress 创建网站完全陌生，但我意识到 HTML 编码似乎比拖放更容易。我已经做了几件事来解决这个问题，但是没有什么能完全按照我的意愿工作。

基本上我想要做的是拥有一张全尺寸图像（与上面对齐的段落相同的宽度）。在该单个图像下方，将有一个空格，然后将有两个并排的图像，其间有空格。它们将是上图宽度的一半，无论您如何将网络浏览器缩放为更大或更小，它都会保持相同的比例。然后我会在下面有同样的东西，下面有 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;">

标签： htmlcssimagephoto

解决方案

理想情况下，会有一个 100% 宽度的图像，接下来的两个将是 50%，每个图像之间有空格。接下来的三个将是 33%。所有图片之间的间距都是均匀的。我怎样才能做到这一点？

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

你可以：

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

flex是一个速记值，是flex-grow, flex-shrink,的缩写flex-basis。

这里的指令flex: 1 0 30%意味着：

  • flex-grow1- 即优先级。当你没有填满空间时成长
  • flex-shrink0- 即优先级。不要缩小，无论空间有多大或多小
  • flex-basisof 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 - 一款学习 flexbox 的游戏

推荐阅读