8

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

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

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

我知道有 IE8 及以下用于 background-size:cover 的 polyfill，但我不是在寻找那个，我正在寻找基于 img 标签的解决方案。我还发现了一些使用绝对定位技术以及 CSS 的 clip 属性的文章，但请记住，我的设计没有什么是绝对大小的。

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

是否有这样一个相当于 background-size:cover 的 JavaScript 可以在 img 标签上工作？

4

4 回答 4

4

这是旧的，但我最近发现了一个新的解决方案。

不要让 img 显示 div 的背景图像，而是创建一个图像：

<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/

于 2013-06-07T00:47:43.003 回答
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');
});
于 2014-01-10T04:02:21.767 回答
0

我找到了一种使用 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。

于 2015-01-08T11:22:46.920 回答
-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;
}
于 2012-12-13T03:15:15.103 回答