关于html：CSS显示调整大小和裁剪的图像


CSS Display an Image Resized and Cropped

我想显示具有一定宽度和高度的URL中的图像，即使它具有不同的大小比例。
所以我想调整大小(保持比例)，然后将图像剪切到我想要的大小。

我可以用html img属性调整大小，我可以用background-image剪切。

我怎么能两个都做？

例：

这个图片：

enter image description here

大小800x600像素，我想显示像200x100像素的图像

使用img我可以调整图像200x150px的大小：

1
2
3
<img
    style="width: 200px; height: 150px;"
    src="http://i.stack.imgur.com/wPh0S.jpg">

这给了我这个：

1
<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

并且使用background-image我可以剪切图像200x100像素。

1
2
3
4
5
6
<div
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg');
    width:200px;
    height:100px;
    background-position:center;">

给我：

1
 

我怎么能两个都做？

调整图像大小，然后将其剪切为我想要的大小？

您可以使用两种方法的组合，例如。

1
2
3
4
5
6
7
8
9
10
11
    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }
1
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">

您可以使用负margin在内移动图像。

相关讨论

使用CSS3，可以使用background-size更改background-image的大小，同时实现两个目标。

css3.info上有很多例子。

根据您的示例实现，使用donald_duck_4.jpg。在这种情况下，background-size: cover;就是您想要的 - 它适合background-image覆盖包含的整个区域并剪切多余的区域(取决于比率)。

1
2
3
4
5
6
7
8
.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the , and clip the excess */
  background-size: cover;
}
1
Donald Duck!

css3 background-image background-size

相关讨论

你试过用这个吗？

1
.centered-and-cropped { object-fit: cover }

我需要调整图像大小，居中(垂直和水平)并裁剪它。

我很高兴地发现，它可以在单个css-line中完成。
请查看此处的示例：http：//codepen.io/chrisnager/pen/azWWgr/？edit = 110

以下是该示例中的CSS和HTML代码：

1
.centered-and-cropped { object-fit: cover }
1
2
3
4
5
6
original
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
   
object-fit: cover
<img class="centered-and-cropped" width="200" height="200"
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

相关讨论

1
2
3
4
5
6
7
8
9
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}
1
  <img src="imageSrc" />

包含div基本上通过隐藏溢出来裁剪图像。

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

谢谢sanchothefat。

我对你的答案有所改进。由于裁剪非常适合每个图像，因此这个定义应该是HTML而不是CSS。

1
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />

object-fit may help you, if you're playing with tag

以下代码将为您裁剪图像。你可以玩对象

1
2
3
4
5
img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

在裁剪类中，放置要显示的图像大小：

1
2
3
4
5
6
7
8
9
10
11
.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

html看起来像：

1
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
1
2
3
4
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}

实例：
https://jsfiddle.net/de4Lt57z/

HTML：

1
  <img src="example.jpg" alt="..." />

CSS：

1
2
3
4
5
6
    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

说明：
此处图像的大小由图像的宽度和高度值调整。裁剪是由剪辑属性完成的。

有关剪辑属性的详细信息如下：

Understanding the CSS Clip Property

1
2
3
<p class="crop">
    <img src="img.jpg" alt="css template" />
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

您可以将img标记放在div标记中并执行这两个操作，但我建议不要在浏览器中缩放图像。由于浏览器具有非常简单的缩放算法，因此它在大多数时间都是糟糕的工作。最好先在Photoshop或ImageMagick中进行缩放，然后将它提供给客户端，非常漂亮。

我所做的是创建一个服务器端脚本，它将在服务器端调整大小并裁剪图片，这样它就可以在interweb上发送更少的数据。

这是相当微不足道的，但如果有人有兴趣，我可以挖掘并发布代码(asp.net)

相关讨论

像Filestack这样的服务会为你做这件事。

它们会显示您的图片网址，并允许您使用网址参数调整其大小。这很容易。

在调整为200x100但保持纵横比后，您的图像将如下所示

整个网址看起来像这样

1
https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

但重要的是公平

1
resize=width:200/crop=d:[0,25,200,100]

enter image description here

相关讨论

如果您使用的是Bootstrap，请尝试使用{ background-size: cover;
}作为，也可以给div一个类说，这样它就变成了
div.example{
background-size: cover}

我最近需要这样做。我想制作一个NOAA图表的缩略图链接。由于他们的图表可以随时更改，我希望我的缩略图随之改变。但是他们的图表有一个问题：它顶部有一个巨大的白色边框，所以如果你只是缩放它来制作缩略图，你最终会在文档中留下无关的空白。

这是我解决它的方式：

http://sealevel.info/example_css_scale_and_crop.html

首先，我需要做一点算术。 NOAA的原始图像是960×720像素，但前七十个像素是多余的白色边框区域。我需要一个348×172的缩略图，顶部没有额外的边框区域。这意味着原始图像的期望部分是720-70 = 650像素高。我需要将其缩小到172像素，即172/650 = 26.5％。这意味着需要从缩放图像的顶部删除70 = 19行像素中的26.5％。

所以…

  • 设置高度= 172 + 19 = 191像素：

    高度= 191

  • 将下边距设置为-19像素(将图像缩短为172像素高)：

    下边距：-19px

  • 将顶部位置设置为-19像素(向上移动图像，使前19个像素行溢出并隐藏而不是底部)：

    顶部：-19px

    • 生成的HTML如下所示：

    1
    2
    3
    <img width=348 height=191 alt=""
    style="border:0;position:relative;margin-bottom:-19px;top:-19px"
    src="…">

    正如您所看到的，我选择了包含标签的样式，但您可以设置样式。

    这种方法的一个工件是，如果显示边框，则顶部边框将丢失。因为无论如何我使用border = 0，这对我来说不是问题。

    1
        <img src="image.jpg"/>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .crop {
      width: 200px;
      height: 150px;
      overflow: hidden;
    }
    .crop img {
      width: 100%;
      /*Here you can use margins for accurate positioning of cropped image*/
    }