是否有相当于背景大小的img（javascript）：封面？

Posted 2023-02-25

【中文标题】是否有相当于背景大小的img（javascript）：封面？

【英文标题】：Is there an img (javascript) equivalent to background-size:cover?

【发布时间】：2012-11-25 17:37:07

【问题描述】：

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

为了在这种高度动态的情况下正确显示照片，我找到了一个有效的方法：每张照片基本上都是一个 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 标签上工作？

【问题讨论】：

你应该可以使用 width:100% 或 height:100% 来获得 background-size:cover 的大部分效果。但是，当您混合使用非常不同的纵横比时，它可能不起作用。

@LieRyan 谢谢，我在回答中添加了一个额外的要求：每个网格单元的大小相同，是基于窗口宽度的动态大小。将一维设置为 100% 可以部分完成这项工作，但它不会像“封面”那样使图像居中。

会简单地设置“img max-width: 100%; ” 可能不是你想要的吗？

@BillyMoat 解决了一部分问题，但不是 background-size:cover 实现的居中部分。

您可以创建一个 jsfiddle 来显示您的问题或指向您网站的链接吗？

【参考方案1】：

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

不要让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/

【讨论】：

如果我们得到了attr 的支持，那就容易多了。请投票 - bugzilla.mozilla.org/show_bug.cgi?id=435426

此解决方案不完全满足所要求的标准。 img标签的背景图片会被img标签的src图片遮挡，显示的输出是一张被拉伸的图片。

它确实有效，并且图像标签的 src 图像不可见，正如答案中使用填充所解释的那样。您的默认值可能具有不同的框大小。我已经更新了答案并包含了一个 jsfiddle。

【参考方案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');
);

【讨论】：

我其实很喜欢这个解决方案的整体概念。对于可访问性或搜索代理情况，它会优雅地降级。

【参考方案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。

【讨论】：

注意到这仅在图像小于其容器时才有效:(

【参考方案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;

【讨论】：

这根本不是backgound-size:cover 的行为方式。