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％纯粹的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，溢出设置为隐藏。这意味着任何大于包含175像素正方形的视觉信息都将被隐藏在视野之外。

对于横向图像声明（.landscape img），高度固定为175px，其大小调整原始高度，宽度设置为auto，调整原始宽度，但仅限于与边界相关的点square，在这种情况下是175px。因此，不是将宽度向下压入正方形，而是简单地填充正方形，然后宽度（即溢出）中的任何额外视觉信息都被溢出隐藏：隐藏。

它对肖像的工作方式相同，只是切换宽度和高度，其中高度为自动，宽度为175px。基本上在每种情况下，无论尺寸超过另一个尺寸都设置为自动，因为较大的尺寸自然会溢出设置缩略图尺寸之外（175px x 175x）。

如果你想在拇指之间添加边距，例如5px的白边距，你可以使用border属性，否则信息溢出时就没有边距。

希望这是有道理的。

Answer 3

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

Answer 4

您可以使用object-fit，在所有主要浏览器中都为widely supported。设置为cover时，浏览器将在设置width和height属性时裁剪图像，而不是拉伸图像。

<img src="whatever.jpg">

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

Answer 5

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

Answer 6

这可能会有所帮助。

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中的图像。

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

6 个答案: