在保持寬高比的同時強制調整影像大小
處理影像時,通常需要將影像大小調整為特定尺寸。但是,保留縱橫比可確保影像不會出現扭曲或拉伸。
初始嘗試:
最初,使用指定的尺寸和自訂 CSS規則來調整大小影像,但縱橫比不是維護:
<img src="big_image.jpg" width="900" height="600" alt="" />
img { max-width: 500px; }
解決方案:
要在保持寬高比的同時強制調整影像大小,可以使用下列CSS 屬性:
結果:
將這些CSS 規則應用到影像:
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p> <img width="400" height="400" src="https://i.sstatic.net/aEEkn.png">
img { display: block; max-width:230px; max-height:95px; width: auto; height: auto; }
產生的影像在指定的最大尺寸內調整大小,同時保持其原始外觀比例。
以上是如何使用 CSS 調整圖片大小,同時保持縱橫比?的詳細內容。更多資訊請關注PHP中文網其他相關文章!