首頁 > web前端 > css教學 > 如何僅使用 CSS 調整圖片大小並將圖片裁切為特定尺寸?

如何僅使用 CSS 調整圖片大小並將圖片裁切為特定尺寸?

Barbara Streisand
發布: 2024-12-29 06:39:10
原創
1011 人瀏覽過

How Can I Resize and Crop Images to Specific Dimensions Using Only CSS?

使用CSS 顯示調整大小和裁剪的圖像

要求: 顯示來自具有指定寬度和高度的URL的影像,無論其原始縱橫比如何。應調整影像大小,然後裁剪以適合所需的尺寸。

解決方案:結合 img 和背景影像屬性:

  • 使用 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;
}
登入後複製

  • 說明>
  • .crop類別定義影像的容器及其所需的寬度和高度。
  • img 元素用於調整影像大小,同時保留其縱橫比。設定寬度和高度以保持原始尺寸比例。
負邊距應用於 img 元素以使其在 .crop 容器中居中並裁剪。邊距是根據原始影像的完整尺寸 (400px x 300px) 和所需的顯示尺寸 (200px x 100px) 計算的。

這種方法可讓您動態調整影像大小和裁剪影像,確保它們在各種裝置上以所需的尺寸和寬高比顯示。

以上是如何僅使用 CSS 調整圖片大小並將圖片裁切為特定尺寸?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板