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?
当前回答
如果你正在使用Bootstrap，尝试使用{background-size: cover; }对于<div>可能给div一个类说<div class="example" style=url('../your_image.jpeg');>所以它变成 div.example { background-size:封面}
其他回答
使用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
在之前的答案中增加了一个小的内容，包括对象合身:封面:
对象的位置
您可以使用object-position属性更改替换元素的内容对象在元素框中的对齐方式。
.trimmed-cover { object-fit:封面; 宽度:100%; 身高:177 px; 物体位置:中心40%; ｝ <img class="trim -cover" src="http://i.stack.imgur.com/wPh0S.jpg">
我最近需要这样做。我想做一个缩略图链接到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%的像素。
So…
设置高度= 172 + 19 = 191像素: 身高= 191 设置底部边距为-19像素(将图像缩短为172像素高): margin-bottom: -19像素 设置顶部位置为-19像素(将图像向上移动，以便顶部19像素的行溢出并隐藏，而不是底部的行): 前:-19像素
生成的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，所以这对我来说不是问题。
您可以将img标记放在div标记中，但我建议不要在浏览器中缩放图像。它在大多数时候都做得很糟糕，因为浏览器的缩放算法非常简单。最好先在Photoshop或ImageMagick中进行缩放，然后将其漂亮地提供给客户端。
你试过用这个吗?
.centered-and-cropped { object-fit: cover }
我需要调整图像的大小，中心(垂直和水平)，然后裁剪它。
我很高兴地发现，它可以在一个css行中完成。 在这里查看示例:http://codepen.io/chrisnager/pen/azWWgr/?editors=110
下面是这个例子的CSS和HTMLcode:
.居中剪裁{对象合身:封面} <标题>原始h1 > < / <img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="熊"> <标题> object-fit:封面h1 > < / <img class="center -and-裁剪" width="200" height="200" style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="熊">
