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?
当前回答
有像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]
其他回答
你试过用这个吗?
.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="熊">
生活例子: 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/
您可以将img标记放在div标记中,但我建议不要在浏览器中缩放图像。它在大多数时候都做得很糟糕,因为浏览器的缩放算法非常简单。最好先在Photoshop或ImageMagick中进行缩放,然后将其漂亮地提供给客户端。
有像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]
你可以把两种方法结合起来使用。
.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/>内移动图像。