如何仅使用 CSS 调整图像大小和裁剪图像？

使用 CSS 调整和裁剪图像

在本文中，我们将探讨如何使用 CSS 调整和裁剪图像。此技术允许您显示具有特定宽度和高度的图像，即使原始图像具有不同的宽高比。

调整图像大小和裁剪图像

要调整图像大小和裁剪图像，您可以结合使用 img 和 background-image 属性。 img 属性允许您调整图像大小，同时保持其纵横比。 background-image 属性允许您将图像裁剪为所需的大小。

示例

考虑以下示例：

<br><img alt="如何仅使用 CSS 调整图像大小和裁剪图像？" ><pre class="brush:php;toolbar:false"> style="max-width:90%" src="https://i.sstatic.net/wPh0S.jpg">

这个步骤将图像大小调整为 200x150 像素，保持其纵横比。

第 2 步：裁剪图像

<br><div>
<pre class="brush:php;toolbar:false">style="background-image:
       url('https://i.sstatic.net/wPh0S.jpg'); 
width:200px; 
height:100px; 
background-position:center;">&amp;nbsp;</div>

此步骤将调整大小的图像裁剪为200x100 像素。

组合方法

您可以结合使用这两种技术来实现所需的结果。例如，以下代码：

<pre class="brush:php;toolbar:false">.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

<div>

此代码会将图像大小调整为 200x150 像素，然后进行裁剪至 200x100 像素。