Question

我有几张不同宽高比和不同方向（垂直/水平）的照片。

我想在网格中显示它们，网格的每个块都是200px宽和200px高度。我知道如何创建网格（“float：left; width：200px; height：200px”）。

我怎么能把图像放在那里？我想调整它们的大小，使得SHORTEST侧成为块的200px，并且“crop”（可能带有“overflow：hidden”？）较长的一侧到相同的200px。

这可能只有CSS吗？如果没有，你会如何解决它？调整服务器端的大小，使最长边始终“正确”（200px）？

到目前为止我所拥有的......

<div class="grid">

    <div class="item">

        <img src="pic1.jpg"/>

    </div>
    <div class="item">

        <img src="pic1.jpg"/>

    </div>
    <div class="item">

        <img src="pic1.jpg"/>

    </div>
    <div class="item">

        <img src="pic1.jpg"/>

    </div>
    <div class="item">

        <img src="pic1.jpg"/>

    </div>
    <div class="item">

        <img src="pic1.jpg"/>

    </div>
    <div class="item">

        <img src="pic1.jpg"/>

    </div>
    ....

</div>


.grid {
    width: 1000px;
}

.item {
    width: 200px;
    height: 200px;
    float: left;
}

Answer 1

我认为通过CSS确定最短尺寸（宽度或高度）是不可能的，因此每次都需要调整相同的尺寸。但其他一切都只能通过CSS实现：

<figure>
    <img src="someimg.png" />
</figure>

figure {
    // crop
    padding: 0;
    height: 200px;
    overflow: hidden;
    // grid align
    float: left;
    margin: 0 1em 1em 0;
}
img {
    // resizing by width
    width: 200px;
}

Answer 2

如果您想按比例缩放图像，请查看：http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale

Answer 3

您可以像这样调整客户端图像的大小：

img {
    height: 200px;
}

但是您需要使用JavaScript来确定哪个是较短的一面：

function resizeImg(img) {
    var h = img.height;
    var w = img.width;
    if (h > w) {
        img.style.width = "200px";
    }
    else {
        img.style.height = "200px";
    }
}

您使用overflow: hidden走在正确的轨道上。然后，只需将图片的margin-height或margin-width设置为( 200 - sideLength ) / 2。

就个人而言，我会在服务器端进行。浏览器不是缩放图像的最佳选择。 5年前的这种说法比现在更为真实 - 这些日子看起来做得相当不错，所以这一点可能没有实际意义。但是，您可以通过从服务器返回预缩缩和裁剪的缩略图来减少下载大小。我在C＃中编写了一个缩略图，它将缩略图写入磁盘，因此如果以前从未请求过，它只需处理图像，否则会返回保存的图像。

调整大小+裁剪图像

3 个答案: