html - CSS显示调整大小和裁剪的图像
我想显示具有一定宽度和高度的URL中的图像，即使它具有不同的大小比例。所以我想调整大小(保持比例)，然后将图像剪切到我想要的大小。
我可以用html background-image属性调整大小，我可以用200x100剪切。
我怎么能两个都做？
例：
这个图片：
有尺寸background-image像素我想显示像200x100像素的图像
随着background-image我可以调整图像大小200x100：
style="width: 200px; height: 150px;"
src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">
这给了我这个：
并用background-image我可以剪切图像200x100像素。
style="background-image:
url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
width:200px;
height:100px;
background-position:center;">
给我：
我怎么能两个都做？
调整图像大小，然后将其剪切为我想要的大小？
17个解决方案
426 votes
您可以使用两种方法的组合，例如。
CSS：
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
}
您可以使用负margin在
roborourke answered 2019-02-04T09:02:34Z
125 votes
使用CSS3，可以使用background-size: cover;更改background-size: cover;的大小，同时实现两个目标。
css3.info上有很多例子。
根据您的示例实现，使用donald_duck_4.jpg。 在这种情况下，background-size: cover;正是你想要的 - 它适合background-image覆盖包含
.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
background-size: cover;
}
css3 background-image background-size
Joel Purra answered 2019-02-04T09:03:16Z
85 votes
你试过用这个吗？
CSS
我需要调整图像大小，居中(垂直和水平)并裁剪它。
我很高兴地发现，它可以在单个css-line中完成。查看此处的示例：[http://codepen.io/chrisnager/pen/azWWgr/?editors=110]
以下是该示例中的CSS和HTML代码：
CSS：
.centered-and-cropped { object-fit: cover }
HTML：
original
object-fit: cover
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
Anatolii Stepaniuk answered 2019-02-04T09:04:16Z
17 votes
.imgContainer {
overflow: hidden;
width: 200px;
height: 100px;
}
.imgContainer img {
width: 200px;
height: 120px;
}
包含div基本上通过隐藏溢出来裁剪图像。
Kelly Anderson answered 2019-02-04T09:04:38Z
8 votes
img {
position: absolute;
clip: rect(0px, 140px, 140px, 0px);
}
Rohit Chaudhary answered 2019-02-04T09:04:53Z
5 votes
谢谢sanchothefat。
我对你的答案有所改进。 由于裁剪非常适合每个图像，因此这个定义应该是HTML而不是CSS。
Pedro Reis answered 2019-02-04T09:05:22Z
4 votes
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
151291 answered 2019-02-04T09:05:37Z
3 votes
在裁剪类中，放置要显示的图像大小：
.crop {
width: 282px;
height: 282px;
overflow: hidden;
}
.crop span.img {
background-position: center;
background-size: cover;
height: 282px;
display: block;
}
html看起来像：
Deivide answered 2019-02-04T09:06:05Z
2 votes
.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;
}
Sergey Chechaev answered 2019-02-04T09:06:21Z
2 votes
实例：[https://jsfiddle.net/de4Lt57z/]
HTML：
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/]
Rafee Muhammad answered 2019-02-04T09:06:59Z
1 votes
您可以将img标记放在div标记中并执行这两个操作，但我建议不要在浏览器中缩放图像。 由于浏览器具有非常简单的缩放算法，因此它在大多数时间都是糟糕的工作。 最好先在Photoshop或ImageMagick中进行缩放，然后将它提供给客户端，非常漂亮。
Dave Markle answered 2019-02-04T09:07:22Z
1 votes
我所做的是创建一个服务器端脚本，它将在服务器端调整大小并裁剪图片，这样它就可以在interweb上发送更少的数据。
这是相当微不足道的，但如果有人有兴趣，我可以挖掘并发布代码(asp.net)
Rob answered 2019-02-04T09:07:50Z
1 votes
像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]
ferrantim answered 2019-02-04T09:08:38Z
0 votes
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 100%;
/*Here you can use margins for accurate positioning of cropped image*/
}
Krone answered 2019-02-04T09:08:53Z
0 votes
如果你正在使用Bootstrap，尝试使用{ background-size: cover;
}为
background-size: cover}
rshah answered 2019-02-04T09:09:15Z
0 votes
我最近需要这样做。 我想制作一个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如下所示：
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…">
如你所见，我选择了包含＆lt; a＆gt;的样式。 标记，但您可以设置＆lt; div＆gt;样式。
这种方法的一个工件是，如果显示边框，则顶部边框将丢失。 因为无论如何我使用border = 0，这对我来说不是问题。
Dave Burton answered 2019-02-04T09:11:01Z
0 votes
可以帮助你，如果你正在玩标签
以下代码将为您裁剪图像。 你可以玩对象
img {
object-fit: cover;
width: 300px;
height: 337px;
}
Hidayt Rahman answered 2019-02-04T09:11:29Z
950
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
