首页 文章

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

提问于
浏览 次
292

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

我可以用html img 属性调整大小，我可以用 background-image 剪切 .
我怎么能两个都做？

例：

这个图片：

enter image description here

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

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

<img 
    style="width: 200px; height: 150px;" 
    src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">

这给了我这个：

<img style="width: 200px; height: 150px;" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">

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

<div 
    style="background-image:
           url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

给我：

<div style="background-image:url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

我怎么能两个都做？
调整图像大小，然后将其剪切为我想要的大小？

html css background-image image

17 回答

  • 428
    <p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p>

    .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;
}
    回复于
  • 87

    如果你正在玩<img>标签，对象适合可能对你有所帮助

    以下代码将为您裁剪图像 . 你可以玩object-fit

    img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}
    回复于
  • 1
    <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*/
}
    回复于
  • 4
    img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

    <img src="w3css.gif" width="100" height="140" />
    回复于
  • 2

    谢谢sanchothefat .

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

    <div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>
    回复于
  • 1

    我最近需要这样做 . 我想制作一个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像素：

    height=191

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

    margin-bottom:-19px

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

    top:-19px

    生成的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，这对我来说不是问题 .

    回复于
  • 5

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

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

    回复于
  • 1
    img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}
    回复于
  • 3

    有services像Filestack将为你做这个 .

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

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

    整个网址看起来像这样

    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]

    enter image description here

    回复于
  • 126

    你试着用这个吗？

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

    我需要调整图像的大小，居中（垂直和水平）并裁剪它 .

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

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

    CSS:

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

    HTML:

    <h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

<h1>object-fit: cover</h1>
<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">
    回复于
  • 17

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

    <div class="crop">
    <img src="..." alt="...">
</div>

    CSS：

    .crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

    您可以使用负 margin 在 <div/> 内移动图像 .

    回复于
  • 8

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

    .crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

    html看起来像：

    <div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>
    回复于
  • 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);
      }

    Explanation: 此处图像的大小由图像的宽度和高度值调整 . 裁剪是通过剪辑属性完成的 .

    有关剪辑属性的详细信息，请访问：http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

    回复于
  • 0
    .imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

    <div class="imgContainer">
  <img src="imageSrc" />
</div>

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

    回复于
  • 0

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

    回复于
  • 1

    如果你正在使用Bootstrap，尝试使用 { background-size: cover; } 为 <div> 也许给div一个类说 <div class="example" style=url('../your_image.jpeg');> 所以它变成 div.example{ background-size: cover}

    回复于
  • 2

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

    css3.info上有a bunch of examples .

    Implemented based on your example，使用donald_duck_4.jpg . 在这种情况下， background-size: cover; 正是您想要的 - 它适合 background-image 覆盖包含 <div> 的整个区域并剪切多余的部分（取决于比率） .

    .with-bg-size {
  background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

    <div class="with-bg-size">Donald Duck!</div>

    css3 background-image background-size

    回复于

相关问题