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?


当前回答

使用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

其他回答

你可以把两种方法结合起来使用。

.crop { 宽度:200 px; 身高:150 px; 溢出:隐藏; } .crop img { 宽度:400 px; 身高:300 px; Margin: -75px 00 -100px; } < div class = "作物”> <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="唐老鸭"> < / div >

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

您可以将img标记放在div标记中,但我建议不要在浏览器中缩放图像。它在大多数时候都做得很糟糕,因为浏览器的缩放算法非常简单。最好先在Photoshop或ImageMagick中进行缩放,然后将其漂亮地提供给客户端。

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

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

尝试使用clip-path属性:

剪切路径属性允许您将元素剪切为基本形状或 SVG源代码。 注意:clip-path属性将替换已弃用的剪辑 财产。

img { 宽度:150 px; 剪辑路径:插入(30px 35px); } < img src = " http://i.stack.imgur.com/wPh0S.jpg " >

这里有更多的例子。

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