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