19

我正在尝试将一系列照片制作成方形照片。它们可能是水平的（即 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>
4

7 回答 7

28

您可以设置父 div 的宽度/高度，然后将子 img 标签设置为 width:100%; 高度：自动；

这将缩小图像以尝试适应父母的纵横比。

您还可以将图像设置为 div 上的背景图像然后，如果您可以使用 css3，则可以弄乱背景大小属性。它的属性是：包含、覆盖或指定高度（50%、50%）（175px、175px）您也可以尝试使用 background-position 使图片居中

<div style="background-image:url(some.png); background-size: cover; background-position: 50%">
于 2012-11-22T19:35:11.040 回答
4

好的，我明白了。

不知道是不是太晚了还是怎么了，但我想出了一个 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属性，否则信息溢出的地方将没有边距。

希望这是有道理的。

于 2013-01-24T17:45:56.237 回答
2

这是一个最新的（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% 基于容器的宽度并且计算的高度等于宽度，您可以切换宽度和高度值（容器和图像）。

于 2022-01-30T18:13:53.360 回答
1

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

<img src="whatever.jpg">

img {
  width: 175px;
  height: 175px;
  object-fit: cover;
}
于 2020-08-13T13:26:12.233 回答
0

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

于 2014-04-02T21:21:32.747 回答
-4

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

于 2013-01-12T23:48:05.780 回答
-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 中即可。

于 2012-11-24T11:50:42.487 回答