使用CSS 顯示調整大小和裁剪的圖像
要求: 顯示來自具有指定寬度和高度的URL的影像,無論其原始縱橫比如何。應調整影像大小,然後裁剪以適合所需的尺寸。
解決方案:結合 img 和背景影像屬性:
範例:
考慮尺寸為 800x600 像素的影像,我們希望將其顯示為 200x100像素。
HTML:
<div class="crop"> <img src="https://i.sstatic.net/wPh0S.jpg" alt="Donald Duck"> </div>
CSS:
.crop { width: 200px; height: 150px; overflow: hidden; } .crop img { width: 400px; height: 300px; margin: -75px 0 0 -100px; }
以上是如何僅使用 CSS 調整圖片大小並將圖片裁切為特定尺寸?的詳細內容。更多資訊請關注PHP中文網其他相關文章!