CSS显示调整大小并裁剪的图像

  • Z时代
  • 2024-01-10
  • 分类：问答

我想显示具有特定宽度和高度的URL的图像，即使它

具有不同的尺寸比例。所以我想调整大小（保持比例），

然后将图像切成我想要的大小。

我可以使用html img属性调整大小，也可以使用剪切background-image。

我该怎么办？

例：

这个图片：

具有800x600像素大小，我想显示为200x100

像素图像

通过img我可以调整图像大小200x150px：

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

这给了我这个：

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

而且background-image我可以削减图像200x100像素。

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

给我：

<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

我该怎么办？

调整图像大小，然后将其切成我想要的大小？

回答：

您可以使用两种方法的组合，例如。

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }
    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }
    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

You can use negative margin to move the image around within the <div/>.

以上是 CSS显示调整大小并裁剪的图像 的全部内容， 来源链接： utcz.com/qa/415711.html

回到顶部