调整大小 + 裁剪图像答案

【问题标题】：resize + crop image调整大小 + 裁剪图像
【发布时间】：2011-11-11 10:50:02
【问题描述】：

我有几张不同纵横比和不同方向（垂直/水平）的图片。

我想在网格中显示它们，网格的每个块宽 200 像素，高 200 像素。我知道如何创建网格（“浮动：左；宽度：200 像素；高度：200 像素”）。

我怎么能把图片放在那里？我想调整它们的大小，使 SHORTEST 一侧成为块的 200 像素，而“裁剪”（可能带有“溢出：隐藏”？）较长的一侧成为相同的 200 像素。

这可能只使用 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;
}

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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】：

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

【讨论】：