html - 调整大小 + 裁剪图像

Question

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

我想在网格中显示它们，网格的每个 block 宽 200 像素，高 200 像素。我知道如何创建网格(“ float :左；宽度:200 像素；高度:200 像素”)。

我怎么能把图片放在那里？我想调整它们的大小，使最短的一侧成为 block 的 200 像素，而“裁剪”(可能带有“溢出:隐藏”？)较长的一侧变为相同的 200 像素。

这可能只用 CSS 吗？如果没有，你会如何解决？调整服务器端的大小，使最长的一侧始终“正确”(200 像素)？

到目前为止我有什么......

<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;
}