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?


当前回答

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />

其他回答

我最近需要这样做。我想做一个缩略图链接到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,所以这对我来说不是问题。

生活例子: 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/

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

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

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

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