Html 使用 CSS 调整和裁剪图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15083789/
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
Resizing and cropping images with CSS
提问by jas7457
I have a site that has a bunch of different images to display, all of different resolutions and aspect ratios. Is there an easy way in CSS to resize and crop images to a certain resolution? For my purposes, I want the resized image to be 280x280.
我有一个网站，有一堆不同的图像要显示，所有不同的分辨率和纵横比。CSS 中是否有一种简单的方法可以将图像调整大小和裁剪到特定分辨率？出于我的目的，我希望调整大小的图像为 280x280。
Of course I can just set <img height = '280' width = '280' />but this will stretch it. I'd like it to the smaller of the two resolutions, make a square, and then take the center pixels. For example, if the resolution is 480x200 I want it to take a 200x200 section out of the center of the image.
当然，我可以设置，<img height = '280' width = '280' />但这会拉伸它。我想要两个分辨率中较小的一个，做一个正方形，然后取中心像素。例如，如果分辨率为 480x200，我希望它从图像的中心取出 200x200 的部分。
I've tried Googling, but to no avail.
我试过谷歌搜索，但无济于事。
回答by emjay
a "real crop" of images with css isn't possible. Real Crop means the the image is reduced to the new values and also it's size is smaller then before.
使用 css 的“真正的裁剪”图像是不可能的。真实裁剪意味着图像缩小到新值，并且它的尺寸比以前更小。
But there is a solution with negative margins or absolute positioning, which will help you a lot. I've used this technique many times.
但是有一个负边距或绝对定位的解决方案，这将对您有很大帮助。我已经多次使用这种技术。
Please take a look at: Cropping images with CSS
请看一看： Cropping images with CSS
回答by Hugo Giraudel
You could use the clip property, meant to crop elements.
您可以使用用于裁剪元素的 clip 属性。
I wrote a tutorial about it a couple of weeks ago at Codrops: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/.
几周前我在 Codrops 上写了一篇关于它的教程：http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ 。
回答by FreddyBushBoy
I actually came across this same problem recently and ended up with a slightly different approach to the background-image way. The other main difference is that my way doesn't assume to know the width and height of the image - so it will work dynamically with any image. It does require a tiny bit of jQuery though to determine the orientation of the images (I' sure you could use plain JS instead though).
实际上，我最近遇到了同样的问题，最终对背景图像方式采用了略有不同的方法。另一个主要区别是我的方式不假设知道图像的宽度和高度 - 所以它可以动态地处理任何图像。它确实需要一点点 jQuery 来确定图像的方向（不过我确定你可以使用普通的 JS）。
I wrote a blog post about itif you are interested in more explaination but the code is pretty simple:
如果您对更多解释感兴趣，我写了一篇关于它的博客文章，但代码非常简单：
HTML:
HTML：
<ul class="cropped-images">
<li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
<li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>
CSS:
CSS：
li {
width: 150px; // Or whatever you want.
height: 150px; // Or whatever you want.
overflow: hidden;
margin: 10px;
display: inline-block;
vertical-align: top;
}
li img {
max-width: 100%;
height: auto;
width: auto;
}
li img.landscape {
max-width: none;
max-height: 100%;
}
jQuery:
jQuery：
$( document ).ready(function() {
$('.cropped-images img').each(function() {
if ($(this).width() > $(this).height()) {
$(this).addClass('landscape');
}
});
});
回答by Rowno
If you set the image as a CSS background, you can use background-size: cover|contain.
如果将图像设置为 CSS 背景，则可以使用background-size:cover|contain。
回答by Chris
You can set the size of all images on your website with CSS:
您可以使用 CSS 设置网站上所有图像的大小：
img {
width: 280px;
height: 280px;
}
The problem is, that some images will look strange because of their aspect radio. The best thing would be to create different sizes of each image (better known as thumbnails) when you upload them. Noot on runtime, that would take to long.
问题是，有些图像会因为它们的方面无线电而看起来很奇怪。最好的办法是在上传每个图像时创建不同大小的图像（更好地称为缩略图）。Noot 在运行时，这将需要很长时间。
