I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the image to the size I want. I can resize with html img property and I can cut with background-image. How can I do both? Example: This image: Has the size 800x600 pixels and I want to show like an image of 200x100 pixels With img I can resize the image 200x150px: <img style="width: 200px; height: 150px;" src="http://i.stack.imgur.com/wPh0S.jpg"> That gives me this: <img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg"> And with background-image I can cut the image 200x100 pixels. <div style="background-image: url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div> Gives me: <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div> How can I do both? Resize the image and then cut it the size I want?


当前回答

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

其他回答

谢谢sanchothefat。

我对你的回答有改进的地方。由于裁剪是非常适合每一个图像,这个定义应该在HTML而不是CSS。

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

在之前的答案中增加了一个小的内容,包括对象合身:封面:

对象的位置

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

.trimmed-cover { object-fit:封面; 宽度:100%; 身高:177 px; 物体位置:中心40%; } <img class="trim -cover" src="http://i.stack.imgur.com/wPh0S.jpg">

有像Filestack这样的服务可以帮你做这件事。

它们获取你的图像url,并允许你使用url参数来调整它的大小。这很简单。

将图像大小调整为200x100,但保持纵横比后,图像将如下所示

整个url看起来像这样

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]

使用CSS3,可以通过background-size来改变背景图像的大小,同时实现这两个目标。

在css3.info上有很多例子。

基于您的示例实现,使用donald_duck_4.jpg。在本例中,background-size: cover;正是你想要的-它适合背景图像覆盖整个区域的包含<div>和剪辑多余的部分(取决于比例)。

.with-bg-size { 背景图片:url (https://i.stack.imgur.com/wPh0S.jpg); 宽度:200 px; 身高:100 px; 背景位置:中心; /*使背景图像覆盖<div>的区域,并剪辑多余的*/ background-size:封面; } <div class="with-bg-size">唐老鸭!< / div >

Css3 background-image background-size