通过CSS将所有照片变为正方形

Question

我想把一系列照片变成正方形。它们可能是横向矩形（即600x400）或纵向矩形（400x600），但我希望无论如何都能变成175x175。我的想法是将较小的一侧max-height或max-width，不允许超过175px的大侧溢出... 然而，我遇到了问题。

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>

- user749798

---

你在意宽高比吗？ - Matthew

我不想只是设置宽度为175，高度为175，因为这样看起来会非常扭曲。但如果稍微有点扭曲，那就没关系了。 - user749798

Answer 1

你可以先设置父级div的宽度/高度，然后将子级img标签设置为宽度：100％；高度：自动；

这将以纵横比为基础将图像缩小以尝试适应父级容器。

您也可以将图像设置为div的背景图像。 然后，如果您可以使用css3，可以使用background-size属性进行更改。 它的属性有：contain，cover或指定的高度（50％，50％）（175px，175px） 您还可以尝试使用background-position来居中图片

<div style="background-image:url(some.png); background-size: cover; background-position: 50%">

- Jesse

Answer 2

这里是一个最新的、简单的答案。

例如，如果你想在容器内放置一个正方形图像。 假设您希望图像占据容器高度的100％，并具有与高度相等的动态宽度：

.container {
  height: 500px; /* any fixed value for the parent */
}

.img {
  width: auto;
  height: 100%;
  aspect-ratio: 1; /* will make width equal to height (500px container) */
  object-fit: cover; /* use the one you need */
}

如果您想将100％的基础值设置为容器的宽度，并且使计算出的高度等于宽度，则可以交换容器和图像的宽度和高度值。

- BiasInput

Answer 3

你可以使用 object-fit，这在所有主流浏览器中得到了广泛支持。当设置为cover时，浏览器将在设置width和height属性时裁剪图像，而不是拉伸它。

<img src="whatever.jpg">

img {
  width: 175px;
  height: 175px;
  object-fit: cover;
}

- Ethan

Answer 4

好的，我明白了。

不知道是否为时已晚，但我已经找到了一种完全使用 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
    }

最重要的是宽度和高度以及overflow:hidden。float:left不是必需的。在横向缩略图声明中（.landscape），边界框设置为175 x 175，overflow设置为hidden。这意味着任何大于包含175px正方形的可视信息都将被隐藏。对于横向图像声明（.landscape img），高度固定为175px，这会调整原始高度，宽度设置为auto，这会调整原始宽度，但仅限于与边界正方形相关的点，而在这种情况下，大小为175px。因此，它不会将宽度压缩到正方形中，而是只填充正方形，然后将宽度中的任何额外视觉信息（即溢出）隐藏在overflow:hidden中。竖向也是同样的道理，只是宽度和高度交换了，其中高度是自动的，宽度是175px。基本上，在每种情况下，超过另一个维度的任何维度都设置为自动，因为自然地，较大的维度将是超出设置的缩略图尺寸（175px x 175x）的那个维度。如果要在缩略图之间添加边距，例如5px的白色边距，可以使用border属性，否则在信息溢出处将没有边距。希望这有意义。

- Peter

---

我如何只使用 CSS 就能分辨出哪张图片是纵向的，哪张是横向的？ - Rodrigo Ruiz

这个按照广告所说的工作正常。建议使用* img类来使用100%而不是像素。此外，它不会使用源图像的中心。 - William Entriken

@RodrigoRuiz 你可以使用类似于 PHP 的 getimagesize() 函数。 - user559533

那么它就不再是100%纯CSS解决方案了。 - Pedro Hoehl Carvalho

Answer 5

确定图像的宽度和高度，然后激活图像的纵向或横向类。如果是纵向的，则使用{ height: 175px; width:auto }。如果是横向的，则反转高度和宽度。

- technoarya

Answer 6

我强烈建议使用NailThumb jQuery插件来创建正方形缩略图，而不会出现失真。http://www.garralab.com/nailthumb.php

- user749798

Answer 7

这可能会有所帮助。

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 中即可。

- Tomas Rekstad

---

你误解了问题！ - TheBosti