如何在不使用 JavaScript 的情況下使用 CSS 按百分比調整圖片大小？

在CSS 中將影像大小調整為自身的百分比

問題：

你怎麼能在原始影像大小未知的情況下，使用CSS 將影像尺寸縮小一定百分比，而不求助於JavaScript 或伺服器端解決方案？

答案：

方法1（視覺調整大小）：

此方法僅在視覺上縮放影像，保持其在DOM 中的原始尺寸。但是，調整大小後的影像位於原始容器的中心。

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

HTML:

<code class="html"><img  src="/static/imghwm/default1.png" data-src="https://via.placeholder.com/300x200" class="lazy" alt="如何在不使用 JavaScript 的情況下使用 CSS 按百分比調整圖片大小？" ></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中文網其他相關文章！