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


333

我想显示具有特定宽度和高度的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>


我该怎么办?
调整图像大小,然后将其切成我想要的大小?

Answers:


474

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

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


9
请注意,如果在包含的图片上设置position:relative,则需要在包含的div上设置position:relative。如果您不这样做,我发现IE实际上不会剪切图像。
Frank Schwieterman 09年

还从.crop img类中删除高度
Waqar Alamgir

@ waqar-alamgir如果您删除了高度声明
它将不起作用

6
还要注意,当使用css裁剪图像时,用户仍然必须下载图像。在将图像发送给用户之前,最好使用php和GD或其他图像编辑库来调整图像的大小和裁剪。这完全取决于您想要的内容,加载服务器或用户的带宽。
J-Rou

15
只是给其他人一个提示:.crop的高度和宽度定义了在哪里分割图像的最底部和最右侧的部分。.crop img的高度和宽度将缩放图像。.crop img保证金将平移图像
Frederik

138

使用CSS3可以更改background-imagewith 的大小,一次background-size实现两个目标。

css3.info上有很多示例

根据您的示例使用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;
}
<div class="with-bg-size">Donald Duck!</div>


1
很好的解决方案,但有一个警告是它与IE <9不兼容(如果这对任何人都不再重要)。另外,我想提及的是,如果您用Cover替换Cover的背景尺寸,它将缩放但不裁剪图像。
2013年

4
对于<img />标签,请查看CSS图像值和3级替换内容规范中的object-fit: cover相关值。
乔尔·普拉

110

你试过用这个吗?

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

我需要调整图像大小,居中(垂直和水平方向),然后进行裁切。

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


这是该示例的CSSHTML代码:

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


2
谢谢,我认为这是最简单,最通用的方法-但它似乎不适用于IE:/在此处找到文档:developer.mozilla.org/de/docs/Web/CSS/object-fit
mozzbozz

2
IE11或EDGE(14)不支持CSS3 object-fit caniuse.com/#feat=object-fit
令人惊讶的

1
@ eye-wonder在Edge 16中受支持,即将推出。如果它不是很严格并且很少使用,那么今天就可以使用
Ray Foss

在CSS3中,我们可以尝试img + object-fit或div + background-image。到目前为止,根据我的经验,背景图像可用于适应更多条件。
埃里克

1
截至目前,Edge也支持此功能(虽然不知道何时开始)。
Gerald Schneider

20
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}
<div class="imgContainer">
  <img src="imageSrc" />
</div>

包含div的对象实际上是通过隐藏溢出来裁剪图像。



8

谢谢sanchothefat。

我对你的回答有所改善。由于裁剪是针对每个图像量身定制的,因此此定义应使用HTML而不是CSS。

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

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

6

object-fit如果您正在玩<img>标签,可能会对您有所帮助

以下代码将为您裁剪图像。您可以玩适合对象的游戏

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

这就是我的一天-我可以轻松地将它附加到光滑的滑动轮播实现中的幻灯片上- 简单的IMG对象解决方案,而不必接触“滑块插件的代码库”
andreas-supersmart

这就是CSS的优势:)
Hidayt Rahman


4

在裁剪类中,放置要显示的图像大小:

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

3
<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;
}

1

您可以将img标签放在div标签中,并同时执行两个操作,但是我建议不要在浏览器中缩放图像。由于浏览器的缩放算法非常简单,因此大部分时间它的工作都很糟糕。最好先在Photoshop或ImageMagick中进行缩放,然后再将其漂亮漂亮地提供给客户端。


1

我要做的是创建一个服务器端脚本,该脚本将在服务器端调整大小并裁剪图片,以便在整个Internet上发送更少的数据。

这相当琐碎,但是如果有人感兴趣,我可以进行挖掘并发布代码(asp.net)


CGI可能是最可移植的方法(且带宽有效),除非OP打算允许用户通过Javascript执行自己的大小调整和裁剪。
斯特拉格

1

诸如Filestack之类的服务将为您完成此任务。

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

调整为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]

在此处输入图片说明


可能是一个不错的插件-但同样地-一项很棒的服务(不,我没有得到这样的报酬;-))-我刚刚签了字,这真的很酷
Jonathan Lyon

1

尝试使用该clip-path属性:

clip-path属性使您可以将元素裁剪为基本形状或SVG源。

注意:clip-path属性将替换不推荐使用的clip属性。

img {
  width: 150px;
  clip-path: inset(30px 35px);
}
<img src="http://i.stack.imgur.com/wPh0S.jpg">

这里有更多示例。


0
<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*/
}

0

如果使用的是引导,尝试使用{ background-size: cover; }<div>也许给DIV一个类的发言权<div class="example" style=url('../your_image.jpeg');>,使其成为 div.example{ background-size: cover}


0

我最近需要这样做。我想制作一个指向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%。

所以…

  1. 设置高度= 172 + 19 = 191像素:

    身高= 191

  2. 将底部边距设置为-19像素(将图像缩短为172像素高):

    底边距:-19px

  3. 将顶部位置设置为-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>

如您所见,我选择为包含的<a>标记设置样式,但可以为<div>设置样式。

这种方法的一个产物是,如果显示边框,则顶部边框将丢失。由于我无论如何都使用border = 0,所以这对我来说不是问题。


0

您可以使用Kodem的图像调整大小服务。您可以仅通过http调用来调整任何图像的大小。可以在浏览器中随意使用,也可以在生产应用中使用。

  • 将图像上传到您喜欢的位置(S3,imgur等)
  • 将其插入您专用的API网址(通过我们的信息中心)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.