纯CSS / 3解决方案，适用于方形区域中的非方形缩略图

Question

鉴于非方形图像，我想将其缩放为适合200px x 200px的盒子：

• 维护宽高比
• 处理肖像和风景
• 仅在一个维度上砍
• 使用纯CSS / CSS3
• 缩小小于200像素的图像
• 缩小大于200像素的图像

以图片表示：

有可能吗？

Answer 1

是的，这是可能的，但前提是您事先知道图像是横向还是纵向。 HTML：

<div class="container">
    <img src="photo.jpg">
</div>

然后，使用JS或某些服务器端魔术（是的，我知道这违反了要求;没有其他办法），将一个类添加到<img> landscape或portrait }。现在，CSS：

.container {
    width: 200px; height: 200px;
    overflow: hidden;
}

.landscape {
    height: 100%;
}

.portrait {
    width: 100%;
}

请记住，这些事情通常在服务器端完成，原因很简单：所以浏览器不需要下载大图像只显示其中的一部分。在抱怨JS的时候，你提到了移动设备（在某处，可能在评论中），但与额外带宽相比，这种影响可以忽略不计。

我想你可以使用这个JS（在我的头脑中）（必须在DOM准备好后调用）：

var imgs = document.querySelectorAll(".container img");
for (var i = 0; i < imgs.length; i++) {
    var img = imgs[0];
    if (img.width > img.height) img.classList.add('landscape');
    else if (img.width < img.height) img.classList.add('portrait');
}

为避免闪烁，您可以使用display: none隐藏图像，然后在应用类后取消隐藏JS。

这根本不是一个重大的表现。它使用浏览器的原生CSS选择引擎，几乎与getElementById一样快。这里没有宽度/高度计算;浏览器已经计算出文档准备好的时间。但是有微观优化的空间：

• 使用更高效的for循环结构（我不确定）
• 摆脱else if条款并坚持使用else：它会使JS更快，但CSS效率更低，是一个不错的权衡。
• 使用className代替classList。再次，进入微观选择领域。

Answer 2

这是一个仅支持html / css的解决方案，可以满足您的所有需求，包括向下扩展。

<div class='square-image'></div>

.square-image {
    width: 200px;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-image: url(your/image.jpg);
}

唯一（次要的）缺点是你必须使用背景图片而不是img标签。要轻松完成这项工作（感谢RobVious），您可以直接应用背景图像。所以你的HTML可能如下所示：

<div style="background-image: url(your/image1.jpg)" class="square-image"></div>
<div style="background-image: url(your/image2.jpg)" class="square-image"></div>

Answer 3

有时候，使用一点JS就不会杀人。我的解决方案利用background-size: cover属性，并使用jQuery（或者您可以使用原始JS）隐藏子<img>并将父背景设置为子图像的源属性。

CSS：

div {
    background-size: cover;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

JS：

$(function(){
    $('div').each(function(){
        $(this)
        .find('img')
            .hide()
            .end()
        .css({
            'background-image': 'url('+$(this).find('img').attr('src')+')'
        });
    });
});

这是一个概念验证演示：jsFiddle