问答中心分类: CSSCSS 显示调整大小和裁剪的图像
0
匿名用户 提问 21分钟 前

我想显示来自具有特定宽度和高度的 URL 的图像,即使它具有不同的大小比例。所以我想调整大小(保持比例),然后将图像剪切到我想要的大小。我可以用 html 调整大小img财产,我可以削减background-image.
我怎样才能做到这两点?
例子:
这个图片:
在此处输入图像描述

有大小800x600像素,我想像图像一样显示200x100像素

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

这给了我这个:

background-image我可以剪图片200x100像素。

给我:

我怎样才能做到这两点?
调整图像大小,然后将其剪切成我想要的大小?

20 Answers
0
Joel Purra 回答 21分钟 前

使用 CSS3 可以改变background-imagebackground-size,同时实现两个目标。
一堆例子css3.info.
根据您的示例实施, 使用donald_duck_4.jpg.在这种情况下,background-size: cover;正是您想要的 – 它适合background-image覆盖容器的整个区域<div>并剪掉多余的部分(取决于比例)。

.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 <div>, and clip the excess */
  background-size: cover;
}
<div class="with-bg-size">Donald Duck!</div>

css3 背景图片 背景尺寸

devnate 回复 21分钟 前

很好的解决方案,但需要注意的是它与 IE &lt;9 不兼容(如果这对任何人都重要的话)。另外,我想提一下,如果您将封面替换为包含背景尺寸,它将缩放,但不会裁剪图像。

Joel Purra 回复 21分钟 前

为了<img />标签,看看object-fit: cover和相关的值CSS 图像值和替换内容模块第 3 级规范.

0
Anatolii Stepaniuk 回答 21分钟 前

你试过用这个吗?

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

我需要调整图像大小、居中(垂直和水平)然后裁剪它。
我很高兴地发现,它可以在一条 css 行中完成。在此处查看示例:http://codepen.io/chrisnager/pen/azWWgr/?editors=110

这里是CSSHTML该示例中的代码:

.centered-and-cropped { object-fit: cover }
<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">
mozzbozz 回复 21分钟 前

谢谢,我认为这是最简单和最通用的方法 – 但它似乎不适用于 IE:/ 在此处查找文档:developer.mozilla.org/de/docs/Web/CSS/object-fit

eye-wonder 回复 21分钟 前

IE11 或 EDGE(14) 不支持 CSS3 object-fitcaniuse.com/#feat=object-fit

Ray Foss 回复 21分钟 前

@eye-wonder Edge 16 支持它,即将推出。如果它的非关键性和谨慎使用,它可以在今天使用

Eric 回复 21分钟 前

在 CSS3 中,我们可以尝试使用 img+object-fit 或 div+background-image 的任何一种方式。到目前为止,根据我的经验,背景图像可用于适应更多条件。

Gerald Schneider 回复 21分钟 前

到目前为止,Edge 也支持这一点(不知道从什么时候开始)。

0
Kelly Anderson 回答 21分钟 前
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}
<div class="imgContainer">
  <img src="imageSrc" />
</div>

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

0
Rohit Chaudhary 回答 21分钟 前
img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />
0
Pedro Reis 回答 21分钟 前

谢谢sanchothefat。
我对你的回答有改进。由于裁剪是为每个图像量身定制的,因此此定义应位于 HTML 而不是 CSS。

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