通过CSS使所有照片成为正方形

Question

我正在尝试将一系列照片制作成方形照片.它们可以是水平矩形(即600x400)或垂直(400x600),但我希望它们在任何一种情况下都是175x175.我的想法是最小高度或最大宽度较小的一侧,并且不允许溢出超过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>

Answer 1

您可以设置父div的宽度/高度,然后将子img标记设置为width:100%; 身高:自动;

这将缩小图像以尝试使父母考虑纵横比.

您还可以将图像设置为div上的背景图像然后,如果您可以使用css3,则可以使用background-size属性.它的属性是:包含,封面或特定高度(50%,50%)(175px,175px)您还可以尝试将图片置于背景位置的中心位置

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

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% 基于容器的宽度并且计算出的高度等于宽度，则可以切换宽度和高度值（容器和图像）。

Answer 3

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

<img src="whatever.jpg">

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

Answer 4

我强烈建议任何想要这样做的人使用 NailThumb jquery 插件。它允许您创建不变形的方形缩略图。 http://www.garralab.com/nailthumb.php