如何防止圖像在瀏覽器調整大小時不成比例地縮小？

CSS：在瀏覽器調整大小時縮小圖像

透過管理面板配置圖像時，用戶可能會遇到圖像不成比例的問題瀏覽器視窗已調整大小。這個問題可以透過理解 CSS 屬性和圖像長寬比之間的相互作用來解決。

提供的 CSS 規則最初包括 max-width 和 height 屬性，這可能會導致瀏覽器調整大小時出現不期望的收縮。為了防止這種情況，必須僅指定一個維度（通常是最大寬度）並將另一個維度設為自動。

範例：

.users-list > li img {
  border-radius: 50%;
  max-width: 100%;
  height: auto;
}

此方法保留了影像的長寬比，同時允許其適當縮放以適應可用空間。如下面的“正確”示例所示，圖像保持其比例，不會過度拉伸或收縮。

不正確：

max-width: 100%;
width: 100px;
height: 100px;

正確:

max-width: 200px;
height: auto;

以上是如何防止圖像在瀏覽器調整大小時不成比例地縮小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！