如何在不使用 JavaScript 的情况下使用 CSS 按百分比调整图像大小？

在 CSS 中将图像大小调整为自身的百分比

问题：

你怎么能在原始图像大小未知的情况下，使用 CSS 将图像尺寸缩小一定百分比，而不求助于 JavaScript 或服务器端解决方案？

答案：

方法 1（视觉调整大小）：

此方法仅在视觉上缩放图像，保持其在 DOM 中的原始尺寸。但是，调整大小后的图像位于原始容器的中心。

<code class="css">img {
  transform: scale(0.5);
}</code>

HTML:

<code class="html"><img src="https://via.placeholder.com/300x200" /></code>

方法 2（基于百分比的背景大小） :

或者，您可以将基于百分比的背景大小应用于包含图像的 DIV 元素。

<code class="css">.image-container {
  width: 100%;
  height: 100%;
  background-image: url("image.png");
  background-size: 50% 50%;
  background-repeat: no-repeat;
}</code>

HTML:

<code class="html"><div class="image-container"></div></code>

注意：

虽然方法 1 可以实现单个图像所需的调整大小结果，但方法 2 可用于在容器内一致地调整多个图像的大小。

以上是如何在不使用 JavaScript 的情况下使用 CSS 按百分比调整图像大小？的详细内容。更多信息请关注PHP中文网其他相关文章！