image - 是否有相当于背景大小 :cover? 的 img(javascript)

Question

我正在研究一种在网格中展示照片的响应式设计。照片本身可以有各种纵横比和大小。此外，放置它们的网格单元格也不是固定宽度的，它们会随着您调整浏览器的大小而缩放。此外，每个网格单元虽然在宽度和高度上是动态的，但大小相同，无论其中的图像如何。

为了在这种高度动态的情况下正确显示照片，我找到了一个可行的方法:每张照片基本上都是一个 div，图像设置为背景图像。为了在动态大小的网格内正确缩放图像的未知宽度/高度，我使用了 CSS3 的 background-size:cover 特性。

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

我知道有 IE8 及以下的 polyfills for background-size:cover，但我不是在寻找那个，我正在寻找基于 img 标签的解决方案。我还找到了使用绝对定位技术以及 CSS 的 clip 属性的文章，但请记住，我的设计在尺寸上没有绝对性。

我想我正在寻找的是一个 javascript 例程，它具有 background-size:cover 的逻辑，用于动态调整大小，在源(图像尺寸)和目标(显示框)大小都是动态的情况下.

是否有这样一个 javascript 等效于 background-size:cover 适用于 img 标签？

Answer 1

这是旧的，但我最近找到了一个新颖的解决方案。

与其制作要显示 div 背景图像的 img，不如创建图像:

<div>
    <img src="mypic.jpg"/>
</div>
<style>
    div {
        width:200px;
        height:200px;
    }
    img {
        box-sizing:border-box;
        width:100%;
        height:100%;
        background: url(mypic.jpg) no-repeat center center;
        background-size:cover;
        padding:50%;
    }
</style>

将包含的 div 设置为您想要图像的宽度/高度。然后将图像放入 100% 宽度/高度并将 src 设置为您想要的 img。同时设置你想要的img作为img的背景图片。将背景大小设置为覆盖，填充为 50%。

诀窍是填充 50%。 img 宽度/高度是固定的，因此随着填充的增加，图像会变得越来越小。 50% 正是隐藏它所需要的量，现在您只看到图像的背景图像以您想要的方式显示，但它仍然可以访问!

http://jsfiddle.net/t72xgbw0/