通过 css 将所有照片变成方形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13518833/
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
Making all photos square via css
提问by user749798
I'm trying to make a series of photos into square photos. They may be rectangular horizontally (i.e. 600x400) or vertically (400x600), but I want to get them to be 175x175 either way. My thought was to max-height or max-width the smaller side, and not allow overflow beyond 175px on the larger side...however, I'm having problems with it.
我正在尝试将一系列照片制作成方形照片。它们可能是水平矩形（即 600x400）或垂直矩形（400x600），但我想让它们成为 175x175。我的想法是将较小的一侧设置为 max-height 或 max-width，并且不允许在较大的一侧溢出超过 175px ……但是，我遇到了问题。
Is this possible with css?
这可以用 css 实现吗？
Below is my attempt, but it giving rectangles still:
下面是我的尝试，但它仍然给出矩形：
<div style="min-height:175px; overflow:hidden; max-height:175px;">
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png">
</div>
采纳答案by user749798
I highly suggestion the NailThumb jquery plugin for anyone that is looking to do this. It allows you to create square thumbnails without distortion. http://www.garralab.com/nailthumb.php
我强烈建议任何想要这样做的人使用 NailThumb jquery 插件。它允许您创建不失真的方形缩略图。 http://www.garralab.com/nailthumb.php
回答by Jesse
You can set the width/height of the parent div then set the child img tag to width:100%; height: auto;
您可以设置父div的宽度/高度，然后将子img标签设置为width:100%；高度：自动；
That will scale the image down to try to fit the parent with aspect ratio in mind.
这将缩小图像以尝试适应具有纵横比的父级。
You can also set the image as a background-image on the div Then if you can use css3 you can mess with the background-size property. It's attributes are: contain, cover, or a specificed height (50%, 50%) (175px, 175px) You could also try to center the picture with background-position
您还可以将图像设置为 div 上的背景图像然后如果您可以使用 css3，您可能会弄乱背景大小属性。它的属性是：包含、覆盖或特定高度（50%、50%）（175px、175px）您也可以尝试将图片与背景位置居中
<div style="background-image:url(some.png); background-size: cover; background-position: 50%">
回答by Peter
Okay I got this.
好的，我明白了。
Don't know if it's too late or what, but I've come up with a 100% pure CSS way of creating square thumbnails. It's something that I've been trying to find a solution for for quite a while and have had no luck. With some experimentation, I've got it working. The main two attributes to use are OVERFLOW:HIDDEN and WIDTH/HEIGHT:AUTO.
不知道是不是太晚了，但我想出了一种 100% 纯 CSS 的方法来创建方形缩略图。这是我长期以来一直试图找到解决方案但没有运气的事情。通过一些实验，我让它工作了。要使用的两个主要属性是 OVERFLOW:HIDDEN 和 WIDTH/HEIGHT:AUTO。
Okay here's what to do:
好的，这是要做的：
Let's say you have a batch of images of varying shapes and sizes, some landscape, some portrait, but all, of course, rectangular. The first thing to do is categorize the image links (thumbnails) by either portrait or landscape, using a class selector. Okay, so let's say you want just to create two thumbnails, to make this simpler. you have:
假设您有一批不同形状和大小的图像，有些是风景，有些是肖像，但当然都是矩形的。首先要做的是使用类选择器按纵向或横向对图像链接（缩略图）进行分类。好的，假设您只想创建两个缩略图，以使其更简单。你有：
img1.jpg (portrait) and img2.jpg (landscape)
img1.jpg（纵向）和 img2.jpg（横向）
For HTML it would look like this:
对于 HTML，它看起来像这样：
<a class="portrait" href="yoursite/yourimages/img1.jpg"><img src="yoursite/yourimages/img1.jpg /></a>
<a class="landscape" href="yoursite/yourimages/img2.jpg"><img src="yoursite/yourimages/img2.jpg /></a>
So, at this point since there is no css yet, the above code would give you your full-sized image as a thumbnail which would link to the same full-sized image. Right, so here's the css for both portrait and landscape. There are two declarations for each (the link and the link's image):
所以，在这一点上，由于还没有 css，上面的代码会给你你的全尺寸图像作为缩略图，它会链接到相同的全尺寸图像。是的，这里是纵向和横向的 css。每个都有两个声明（链接和链接的图像）：
.landscape {
float:left;
width:175px;
height:175px;
overflow:hidden;
}
.landscape img{
width:auto;
height: 175px;
}
.portrait {
float:left;
width:175px;
height:175px;
overflow:hidden;
}
.portrait img {
width:175px; <-- notice these
height: auto; <-- have switched
}
The most important things are the width and height and the overflow:hidden. Float left isn't necessary for this to work.
最重要的是宽度和高度以及溢出：隐藏。不需要向左浮动就可以正常工作。
In the landscape thumbnail declaration (.landscape) the bounding box is set to 175 x 175 and the overflow is set to hidden. That means that any visual information larger than that containing 175px square will be hidden from view.
在横向缩略图声明 (.landscape) 中，边界框设置为 175 x 175，溢出设置为隐藏。这意味着任何大于包含 175px 正方形的视觉信息都将被隐藏。
For the landscape image declaration (.landscape img), the height is fixed at 175px, which resizes the original height and the width is set to auto, which resizes the original width, but only to the point of relating to the bounding square, which in this case is 175px. So rather than smush the width down into the square, it simply fills the square and then any extra visual information in the width (i.e. the overflow) is hidden with the overflow:hidden.
对于风景图片声明（.landscape img），高度固定为175px，调整原来的高度，宽度设置为auto，即调整原来的宽度，但只涉及到与边界方块相关的点，即在这种情况下是 175px。因此，它不是将宽度向下涂抹到正方形中，而是简单地填充正方形，然后宽度中的任何额外视觉信息（即溢出）都用溢出隐藏：隐藏。
It works the same way for portrait, only that the width and height is switched, where height is auto and width is 175px. Basically in each case, whatever dimension exceeds the other is set to auto, because naturally the larger dimension would be the one that would overflow outside of the set thumbnail dimensions (175px x 175x).
纵向也是一样的，只是宽度和高度切换了，高度为自动，宽度为175px。基本上在每种情况下，超过另一个尺寸的任何尺寸都设置为自动，因为自然较大的尺寸会溢出设置的缩略图尺寸（175px x 175x）之外的尺寸。
And if you want to add margins between thumbs, for instance a 5px white margin, you can use the border property, otherwise there will be no margin where the information is overflowing.
如果你想在拇指之间添加边距，例如 5px 的白色边距，你可以使用 border 属性，否则信息溢出的地方将没有边距。
Hope this makes sense.
希望这是有道理的。
回答by technoarya
Determine width and height of image, then active portrait or landscape class of the image. If portrait do {height:175px; width:auto}. If landscape, reverse height and width.
确定图像的宽度和高度，然后激活图像的纵向或横向类别。如果肖像做{height:175px; width:auto}。如果是横向，则反转高度和宽度。
回答by Tomas Rekstad
This might help.
这可能会有所帮助。
CSS:
CSS：
.image{
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */
}
HTML:
HTML：
<div class="image"></div>
This worked for me. Just put the URL to the image inside the div.
这对我有用。只需将 URL 放在 div 中的图像上。
