如何在 CSS 中調整大小時保持圖片長寬比？

解決CSS 中的影像大小調整問題

當在管理面板中遇到影像大小調整問題時，了解CSS 屬性的相互作用至關重要。調整最初完美顯示的圖像大小時會遇到這樣的問題。然而，在調整瀏覽器大小時，圖像會不成比例地縮小。

要解決此問題，關鍵是保持影像的寬高比。這意味著允許一個維度固定，同時允許另一個維度自動調整。透過固定寬度並將高度設為自動，可以保留影像的原始比例。

例如，請考慮以下程式碼片段：

img {
  display: block;
}
.correct,
.incorrect {
  border: 1px solid red;
  display: inline-block;
}
.incorrect img {
  max-width: 100%;
  width: 100px;
  height: 100px;
}
.correct img {
  max-width: 100%;
  width: 200px;
  height: auto;
}

在此範例中，「. Correct」類別透過將寬度設為固定值（200px）並讓高度自動調整來保持縱橫比。這可以確保影像在調整大小時不會拉伸。

相反，「.in Correct」類別會導致影像拉伸，因為寬度和高度都是固定的。這會破壞寬高比並導致影像失去其預期尺寸。

透過使用適當的 CSS 屬性，您可以確保圖片優雅地調整大小並保持其視覺完整性，而無論瀏覽器視窗大小如何。

以上是如何在 CSS 中調整大小時保持圖片長寬比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！