Question

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

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

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

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

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

是否有这样的javascript等同于background-size：封面适用于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/

Answer 2

考虑到可访问性和SEO，我使用jQuery创建了一个非常类似问题的解决方案，它没有重现背景覆盖的逻辑，它利用它。

实际上，图像成为具有背景的容器的角色，并且以编程方式添加背景封面。

$imagesContainer.find('img').each(function(i, elem){
  $(elem).css({
    backgroundSize : 'cover',
    backgroundImage : 'url("' + $(elem).attr('src') + '")',
    backgroundPosition : 'center',
    display : 'block',
    height : '100%', // Or any size needed.
    width : '100%'
  });
  $(elem).removeAttr('src');
});

Answer 3

我找到了一种使用css和javascript覆盖带图像的容器的好方法：

HTML：

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

CSS：

img {
  position: absolute;
  min-width: 100%;   // To cover container
  min-height: 100%;  // To cover container
  top: 50%;          // To move image corner to center of container
  left: 50%;         // To move image corner to center of container
}

使用Javascript：

$('img').css({
  'margin-top': -$('img').height()/2,   // To move to center of image
  'margin-left': -$('img').width()/2    // To move to center of image
});

确保在加载图片后运行javascript。

Answer 4

我相信你想做两件事：

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

问题是（如果你想保持图像的宽高比）是你必须根据图像和浏览器大小垂直和水平居中。

您可以使用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;
}

是否有一个img（javascript）相当于background-size：cover？

4 个答案: