Html CSS 显示调整大小和裁剪的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/493296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Display an Image Resized and Cropped
提问by InfoStatus
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.
我想显示来自具有特定宽度和高度的 URL 的图像，即使它具有不同的大小比例。所以我想调整大小（保持比例），然后将图像剪切到我想要的大小。
I can resize with html imgproperty and I can cut with background-image.
How can I do both?
我可以用 htmlimg属性调整大小，我可以用background-image.
我怎样才能做到这两点？
Example:
例子：
This image:
这个图片：
Has the size 800x600pixels and I want to show like an image of 200x100pixels
具有800x600像素大小，我想像200x100像素图像一样显示
With imgI can resize the image 200x150px:
随着img我可以调整图像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-imageI can cut the image 200x100pixels.
并与background-image我可以减少图像200x100的像素。
<div
style="background-image:
url('https://i.stack.imgur.com/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
Gives me:
给我：
<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div>
How can I do both?
Resize the image and then cut it the size I want?
我怎样才能做到这两点？
调整图像大小，然后将其剪裁成我想要的大小？
回答by roborourke
You could use a combination of both methods eg.
您可以使用两种方法的组合，例如。
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
} <div class="crop">
<img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
</div>You can use negative marginto move the image around within the <div/>.
您可以使用负片margin在<div/>.
回答by Joel Purra
With CSS3 it's possible to change the size of a background-imagewith background-size, fulfilling both goals at once.
使用 CSS3 可以更改background-imagewith的大小background-size，同时实现两个目标。
There are a bunch of exampleson css3.info.
Implemented based on your example, using donald_duck_4.jpg. In this case, background-size: cover;is just what you want - it fits the background-imageto cover the entire area of the containing <div>and clips the excess (depending on the ratio).
根据您的示例实现，使用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>回答by Anatolii Stepaniuk
Did you try to use this?
你试过用这个吗？
.centered-and-cropped { object-fit: cover }
I needed to resize image, center (both vertically and horizontally) and than crop it.
我需要调整图像的大小，居中（垂直和水平）然后裁剪它。
I was happy to find, that it could be done in a single css-line. Check the example here: http://codepen.io/chrisnager/pen/azWWgr/?editors=110
我很高兴地发现，它可以在单个 css 行中完成。检查这里的例子：http: //codepen.io/chrisnager/pen/azWWgr/?editors=110
Here is the CSSand HTMLcode from that example:
下面是CSS和HTML从该实施例的代码：
.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">回答by Kelly Anderson
.imgContainer {
overflow: hidden;
width: 200px;
height: 100px;
}
.imgContainer img {
width: 200px;
height: 120px;
}
<div class="imgContainer">
<img src="imageSrc" />
</div>
The containing div with essentially crop the image by hiding the overflow.
包含 div 基本上通过隐藏溢出来裁剪图像。
回答by Rohit Chaudhary
img {
position: absolute;
clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />
回答by Pedro Reis
Thanks sanchothefat.
谢谢桑乔法特。
I have an improvement to your answer. As crop is very tailored for every image, this definitions should be at the HTML instead of CSS.
我对你的回答有改进。由于裁剪是为每张图像量身定制的，所以这个定义应该在 HTML 而不是 CSS。
<div style="overflow:hidden;">
<img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>
回答by Hidayt Rahman
object-fitmay help you, if you're playing with<img>tag
object-fit可能会帮助你，如果你在玩<img>标签
The below code will crop your image for you. You can play around with object-fit
下面的代码将为您裁剪图像。你可以玩弄对象适合
img {
object-fit: cover;
width: 300px;
height: 337px;
}
回答by 151291
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
回答by Deivide
In the crop class, place the image size that you want to appear:
在crop类中，放置要显示的图像大小：
.crop {
width: 282px;
height: 282px;
overflow: hidden;
}
.crop span.img {
background-position: center;
background-size: cover;
height: 282px;
display: block;
}
The html will look like:
html 将如下所示：
<div class="crop">
<span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>
回答by Md. Rafee
Live Example: https://jsfiddle.net/de4Lt57z/
现场示例：https: //jsfiddle.net/de4Lt57z/
HTML:
HTML：
<div class="crop">
<img src="example.jpg" alt="..." />
</div>
CSS:
CSS：
.crop img{
width:400px;
height:300px;
position: absolute;
clip: rect(0px,200px, 150px, 0px);
}
Explanation:Here image is resized by width and height value of the image. And crop is done by clip property.
说明：这里的图像是根据图像的宽度和高度值调整大小的。裁剪是由剪辑属性完成的。
For details about clip property follow: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
有关剪辑属性的详细信息，请参见：http: //tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
