我正在尝试将一系列照片制作成方形照片。它们可能是水平的（即 600x400）或垂直的（400x600）矩形，但我想让它们成为 175x175。我的想法是在较小的一侧设置最大高度或最大宽度，并且不允许在较大的一侧溢出超过 175 像素……但是，我遇到了问题。
这可以用 css 实现吗？
下面是我的尝试，但它仍然给出了矩形：
<div style="min-height:175px; overflow:hidden; max-height:175px;">
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png">
</div>
【问题讨论】：
您可以设置父div的宽度/高度，然后将子img标签设置为宽度：100%；高度：自动；
这将缩小图像以尽量适应父母的纵横比。
您还可以将图像设置为 div 上的背景图像 然后，如果您可以使用 css3，则可以弄乱 background-size 属性。 它的属性是：包含、覆盖或指定高度（50%、50%）（175px、175px） 您也可以尝试使用 background-position 使图片居中
<div style="background-image:url(some.png); background-size: cover; background-position: 50%">
【讨论】：
这可能会有所帮助。
CSS：
.image{
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */
}
HTML：
<div class="image"></div>
这对我有用。只需将图片的 URL 放入 div 中即可。
【讨论】：
我强烈建议任何想要这样做的人使用 NailThumb jquery 插件。它允许您创建方形缩略图而不会失真。 http://www.garralab.com/nailthumb.php
【讨论】：
好的，我知道了。
不知道是不是太晚了还是怎么了，但我想出了一个 100% 纯 CSS 方法来创建方形缩略图。这是我长期以来一直试图找到解决方案但没有运气的东西。通过一些实验，我得到了它的工作。要使用的主要两个属性是 OVERFLOW:HIDDEN 和 WIDTH/HEIGHT:AUTO。
好的，接下来该做什么：
假设您有一批不同形状和大小的图像，有些是风景的，有些是人像的，但当然都是矩形的。首先要做的是使用类选择器按纵向或横向对图像链接（缩略图）进行分类。好的，假设您只想创建两个缩略图，以使其更简单。你有：
img1.jpg（纵向）和 img2.jpg（风景）
对于 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>
因此，此时由于还没有 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
}
最重要的是宽度和高度以及溢出：隐藏。向左浮动不是此工作所必需的。
在横向缩略图声明 (.landscape) 中，边界框设置为 175 x 175，溢出设置为隐藏。这意味着任何大于包含 175px 正方形的视觉信息都将从视图中隐藏。
对于横向图像声明（.landscape img），高度固定为175px，调整原始高度，宽度设置为auto，调整原始宽度，但仅与边界有关正方形，在本例中为 175px。因此，与其将宽度向下涂抹到正方形中，它只是简单地填充正方形，然后宽度中的任何额外视觉信息（即溢出）被溢出隐藏。
它的工作方式与纵向相同，只是切换了宽度和高度，其中高度为自动，宽度为 175px。基本上在每种情况下，任何超过另一个的尺寸都会设置为自动，因为自然较大的尺寸会溢出设置的缩略图尺寸（175px x 175x）之外。
如果你想在拇指之间添加边距，例如5px的白色边距，你可以使用border属性，否则信息溢出的地方将没有边距。
希望这是有道理的。
【讨论】：
* img 类使用 100% 而不是像素。此外，这不会使用源图像的中心。
确定图像的宽度和高度，然后确定图像的活动纵向或横向类别。如果肖像做{height:175px; width:auto}。如果是横向，则反转高度和宽度。
【讨论】：
您可以在所有主流浏览器中使用object-fit，即widely supported。当设置为cover 时，浏览器将在设置width 和height 属性时裁剪图像，而不是拉伸它。
<img src="whatever.jpg">
img {
width: 175px;
height: 175px;
object-fit: cover;
}
【讨论】：
这是一个最新（2022）和简单的答案。
例如，如果您想在容器内放置一个方形图像。 假设您希望图像占容器高度的 100%，并且动态宽度等于高度：
.container {
height: 100px; // any value
}
.img {
width: auto;
height: 100%;
aspect-ratio: 1; // will make width equal to height (100px container)
object-fit: cover; // use the one you need
}
如果您希望 100% 基于容器的宽度并计算出的高度等于宽度，则可以切换宽度和高度值（容器和图像）。
【讨论】：