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?

当前回答

谢谢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

其他回答

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

2014-02-28 11:29:32

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

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

2014-03-12 06:38:49

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

2009-01-29 20:40:32

尝试使用clip-path属性:

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

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

这里有更多的例子。

2020-05-05 07:58:29

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

.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/>内移动图像。

2009-01-29 20:42:52

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

推荐文章

最新文章

标签