调整大小+裁剪图像

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

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

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

就我个人而言，我会在服务器端完成这一切。浏览器在缩放图像方面并不是最好的。这个说法在五年前比现在更正确——他们现在似乎做得很好，所以这一点可能没有实际意义。而且，您还可以通过从服务器返回预缩小和裁剪的缩略图来减少下载大小。我用 C# 编写了一个缩略图程序，将缩略图写入磁盘，这样它只需处理以前从未请求过的图像，否则它将返回保存的图像。