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

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;"> </div> Gives me: <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div> How can I do both? Resize the image and then cut it the size I want?

当前回答

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

对象的位置

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

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

2021-04-26 10:23:11

其他回答

我所做的是创建一个服务器端脚本，它将在服务器端调整大小和裁剪图片，这样它就会在互联网上发送更少的数据。

它相当简单，但如果有人感兴趣，我可以挖掘并发布代码(asp.net)

2009-01-29 20:46:05

如果你正在使用Bootstrap，尝试使用{background-size: cover; }对于<div>可能给div一个类说<div class="example" style=url('../your_image.jpeg');>所以它变成 div.example { background-size:封面}

2016-06-14 19:32:37

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

上传图片到你喜欢的地方(S3, imgur等) 将其插入到您的专用API url(从我们的仪表板)

2019-09-24 06:22:24

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

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

2014-03-12 06:38:49

谢谢sanchothefat。

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

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

2013-11-16 12:40:08

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

推荐文章

最新文章

标签