在 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中文网其他相关文章！
