是否有一个img(javascript)相当于background-size:cover？

Question

我正在开发一种响应式设计,用于在网格中展示照片.照片本身可以是所有宽高比和大小.此外,放置它们的网格单元也没有固定的宽度,它们会在您调整浏览器大小时进行缩放.此外,每个网格单元虽然在宽度和高度上是动态的,但是具有相同的尺寸,而不管其内部的图像.

为了在这种高度动态的情况下正确显示照片,我找到了一个工作方法:每张照片基本上都是div,图像设置为背景图像.为了在动态大小的网格内正确缩放图像的未知宽度/高度,我正在使用CSS3的背景大小:封面功能.

最终结果非常棒,它在UI和显示方面完全符合我的要求.尽管如此,我对这个解决方案的可访问性降低感到不满意:它不是SEO友好而不是插件友好(想想社交插件).因此,我试图重现我的工作情况,但这次使用好的旧img标签而不是CSS背景.

我知道有IE8和以下的polyfill用于背景大小:封面,但我不是在寻找,我正在寻找基于img标签的解决方案.我还发现了使用绝对定位技术以及CSS的剪辑属性的文章,但请记住,我的设计绝对没有大小.

我想我正在寻找的是一个具有背景大小逻辑的javascript例程:在动态大小调整的情况下,在源(图像维度)和目标(显示框)都是动态大小的情况下.

是否有这样的javascript相当于background-size:封面适用于img标签？

Answer 1

我相信您想做两件事：

1. 让图像填满窗口
2. 确保图像垂直和水平居中。

问题是（如果您想保持图像的纵横比），您必须根据图像和浏览器大小将其垂直和水平居中。

display:table您可以使用和的组合margin:0 auto以及智能高度/宽度设置来制作纯 CSS 解决方案。

请参阅小提琴： http: //jsfiddle.net/5yVYM/3/

.wrapper {
    display:table;
    text-align: center;
    margin:0 auto;
    width:100%;
    height:100%;
}

.wrapper div {
    display:table-cell;
    vertical-align:middle;
    max-width:100%;
    max-height:100%;
}

img {
    width:100%;
    height:auto;
}