CSS 显示调整大小和裁剪的图像答案

【问题标题】：CSS Display an Image Resized and CroppedCSS 显示调整大小和裁剪的图像
【发布时间】：2010-10-04 08:16:57
【问题描述】：

我想显示来自具有特定宽度和高度的 URL 的图像，即使它具有不同的大小比例。所以我想调整大小（保持比例），然后将图像剪切到我想要的大小。

我可以用 html img 属性调整大小，我可以用background-image 剪切。
我怎样才能做到这两点？

例子：

这张图片：

大小为800x600 像素，我想显示为200x100 像素的图像

使用img，我可以调整图像大小200x150px：

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

这给了我这个：

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

使用background-image，我可以剪切图像200x100 像素。

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

给我：

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

我怎样才能做到这两点？
调整图像大小，然后将其剪切成我想要的大小？

【问题讨论】：

标签： html css background-image image

【解决方案1】：

对先前答案的一个小补充，包括object-fit: cover：

object-position

您可以使用 object-position 属性更改被替换元素的内容对象在元素框内的对齐方式。

.trimmed-cover {
  object-fit: cover;
  width: 100%;
  height: 177px;
  object-position: center 40%;
}

&lt;img class="trimmed-cover" src="http://i.stack.imgur.com/wPh0S.jpg"&gt;

【讨论】：

【解决方案2】：

您还可以使用一个名为 Croppie 的工具来裁剪图像...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://foliotek.github.io/Croppie/croppie.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="https://foliotek.github.io/Croppie/croppie.js"> </script>
<script src="https://foliotek.github.io/Croppie/bower_components/exif-js/exif.js"> </script>

<style>
    #page {
        background: #ffffff;
        padding: 20px;
        margin: 20px;
    }

    #demo-basic {
        width: 600px;
        height: 600px;
    }
</style>
</head>
<body>
<h1>Crop Image Demo</h1>
<input id="upload" type="file" />
<br />
<div id="page">
<div id="demo-basic"></div>
</div>

<input id="upload-result" type="button" value="Crop Image"/>
<br />
<img id="cropped-result" src=""/>

<script>
    var $uploadCrop;       

    $("#upload").on("change", function () { readFile(this); show(); });

    $("#upload-result").on("click", function (ev) {
        $uploadCrop.croppie("result", {
            type: "canvas",
            size: "viewport"
        }).then(function (resp) {
            $("#cropped-result").attr("src", resp);
        });
    });

    function show() {
        $uploadCrop = $("#demo-basic").croppie({
            viewport: { width: 100, height: 100 },
            boundary: { width: 300, height: 300 },
            enableResize: true,
            enableOrientation: true,
            mouseWheelZoom: 'ctrl',
            enableExif: true
        });
    }

    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
        
            reader.onload = function (e) {
                $("#demo-basic").addClass("ready");
                $uploadCrop.croppie("bind", {
                    url: e.target.result
                }).then(function () {
                    console.log("jQuery bind complete");
                });
            
            }
        
            reader.readAsDataURL(input.files[0]);
        }
        else {
            alert("Sorry - you're browser doesn't support the FileReader API");
        }
    }
</script>
</body>
</html>

【讨论】：

【解决方案3】：

尝试使用clip-path 属性：

clip-path 属性可让您将元素剪辑为基本形状或一个 SVG 源代码。

注意：clip-path 属性将替换已弃用的剪辑属性。

img {
  width: 150px;
  clip-path: inset(30px 35px);
}

&lt;img src="http://i.stack.imgur.com/wPh0S.jpg"&gt;

更多示例here。

【讨论】：

【解决方案4】：

您可以使用 Kodem 的Image Resize Service。只需一个 http 调用，您就可以调整任何图像的大小。可以在浏览器中随意使用，也可以在您的生产应用中使用。

将图片上传到您喜欢的位置（S3、imgur 等）
将其插入您的专用 API 网址（来自我们的仪表板）

【讨论】：

【解决方案5】：

你试过用这个吗？

.centered-and-cropped { object-fit: cover }

我需要调整图像大小、居中（垂直和水平）然后裁剪它。

我很高兴地发现，它可以在单个 css 行中完成。在此处查看示例：http://codepen.io/chrisnager/pen/azWWgr/?editors=110

这是该示例中的CSS 和HTML代码：

.centered-and-cropped { object-fit: cover }

<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

【讨论】：

谢谢，我认为这是最简单和最通用的方法 - 但它似乎不适用于 IE：/ 在此处查找文档：developer.mozilla.org/de/docs/Web/CSS/object-fit
IE11 或 EDGE(14) 不支持 CSS3 object-fit caniuse.com/#feat=object-fit
@eye-wonder Edge 16 支持它，即将推出。如果它不是关键的并且很少使用，它可以在今天使用
在 CSS3 中，我们可以尝试 img+object-fit 或 div+background-image 的任何一种方式。到目前为止，根据我的经验，背景图像可用于适应更多条件。
到目前为止，Edge 也支持此功能（不知道从什么时候开始）。

【解决方案6】：

使用 CSS3，可以使用 background-size 更改 background-image 的大小，同时实现这两个目标。

css3.info上有a bunch of examples。

Implemented based on your example，使用donald_duck_4.jpg。在这种情况下，background-size: cover; 正是您想要的 - 它适合 background-image 以覆盖包含 <div> 的整个区域并剪裁多余部分（取决于比率）。

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

&lt;div class="with-bg-size"&gt;Donald Duck!&lt;/div&gt;

css3 background-image background-size

【讨论】：

很好的解决方案，但需要注意的是它与 IE
对于<img /> 标签，查看object-fit: cover 和来自CSS Image Values and Replaced Content Module Level 3 specification 的相关值。

【解决方案7】：

您可以结合使用这两种方法，例如。

    .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>

您可以使用否定的margin 在<div/> 内移动图像。

【讨论】：

请注意，如果在包含的图像上设置 position:relative，则需要在包含的 div 上设置 position:relative。如果你不这样做，我发现 IE 不会实际剪切图像。
也从 .crop img 类中删除高度
@waqar-alamgir 如果您删除了高度声明，它将无法正常工作
另外请注意，当使用 css 裁剪图像时，用户仍然需要下载图像。在将图像发送给用户之前，最好使用 php 和 GD 或其他图像编辑库来调整图像大小和裁剪图像。这一切都取决于你想要什么，加载服务器或用户带宽。
请注意：.crop 高度和宽度定义了对图像最底部和最右侧部分的切片位置。 .crop img 高度和宽度将缩放图像。 .crop img 边距将平移图像

【解决方案8】：

object-fit 可以帮助你，如果你正在使用<img> 标签

以下代码将为您裁剪图像。你可以玩object-fit

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

【讨论】：

这让我很开心 - 我可以轻松地将它附加到我光滑的滑块轮播实现中的幻灯片上 - 普通 IMG 对象解决方案，而不涉及“滑块插件的代码库”
这就是 CSS 的优势 :)

【解决方案9】：

我最近需要这样做。我想制作一个指向 NOAA 图表的缩略图链接。由于他们的图表可能随时更改，我希望我的缩略图随之更改。但是他们的图表有一个问题：它的顶部有一个巨大的白色边框，所以如果你只是缩放它来制作缩略图，你最终会在文档中出现多余的空白。

我是这样解决的：

http://sealevel.info/example_css_scale_and_crop.html

首先我需要做一点算术。 NOAA 的原始图像是 960 × 720 像素，但前 70 个像素是多余的白色边框区域。我需要一个 348 × 172 的缩略图，顶部没有额外的边框区域。这意味着原始图像的所需部分是 720 - 70 = 650 像素高。我需要将其缩小到 172 像素，即 172 / 650 = 26.5%。这意味着需要从缩放图像的顶部删除 70 = 19 行像素中的 26.5%。

那么……

设置高度 = 172 + 19 = 191 像素：

身高=191
将下边距设置为 -19 像素（将图像缩短为 172 像素高）：

margin-bottom:-19px
将顶部位置设置为 -19 像素（将图像向上移动，以便顶部 19 像素行溢出并隐藏而不是底部）：

顶部：-19px

生成的 HTML 如下所示：

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

如您所见，我选择设置包含标记的样式，但您可以改为设置

样式。

这种方法的一个缺陷是，如果您显示边框，则顶部边框将丢失。因为无论如何我都使用border=0，所以这对我来说不是问题。

【讨论】：

【解决方案10】：

有像 Filestack 这样的services 会为你做这件事。

他们获取您的图片 url 并允许您使用 url 参数调整它的大小。这很容易。

您的图片在调整为 200x100 但保持纵横比后会如下所示

整个网址是这样的

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

但重要的部分只是

resize=width:200/crop=d:[0,25,200,100]

【讨论】：

不错的插件可能 - 但同样 - 一个很棒的服务（不，我没有报酬说这个;-)） - 我刚刚注册，这很酷

【解决方案11】：

如果您使用的是 Bootstrap，请尝试使用 { background-size: cover; } 作为 <div> 或者给 div 一个类说 <div class="example" style=url('../your_image.jpeg');> 所以它变成 div.example{ background-size: cover}

【讨论】：

【解决方案12】：

实时示例： https://jsfiddle.net/de4Lt57z/

HTML：

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS：

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

解释： 此处图像根据图像的宽度和高度值调整大小。而裁剪是通过 clip 属性完成的。

有关剪辑属性的详细信息如下： http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

【讨论】：

【解决方案13】：

<div class="crop">
    <img src="image.jpg"/>
</div>

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

【讨论】：

【解决方案14】：

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

包含的 div 基本上通过隐藏溢出来裁剪图像。

【讨论】：

【解决方案15】：

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

【讨论】：

【解决方案16】：

谢谢sanchothefat。

我对您的回答有所改进。由于裁剪是为每张图片量身定制的，因此此定义应位于 HTML 而不是 CSS。

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

【讨论】：

【解决方案17】：

在裁剪类中，放置您想要显示的图像尺寸：

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

html 将如下所示：

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

【讨论】：

【解决方案18】：

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}

【讨论】：

【解决方案19】：

<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p>

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

【讨论】：

【解决方案20】：

我所做的是创建一个服务器端脚本，该脚本将在服务器端调整和裁剪图片的大小，以便通过互联网发送更少的数据。

相当琐碎，但如果有人有兴趣，我可以挖掘并发布代码（asp.net）

【讨论】：

CGI 可能是最便携的方法（和带宽效率），除非 OP 打算允许用户通过 Javascript 执行自己的调整大小和裁剪。

【解决方案21】：

您可以将 img 标签放在 div 标签中并同时执行这两种操作，但我建议您不要在浏览器中缩放图像。大多数时候它做得很糟糕，因为浏览器有非常简单的缩放算法。最好先在 Photoshop 或 ImageMagick 中进行缩放，然后将其漂亮漂亮地提供给客户。

【讨论】：