强制 div 具有背景图像的大小

Posted 2023-03-06

【中文标题】强制 div 具有背景图像的大小

【英文标题】：Force div to have the size of background image

【发布时间】：2016-03-17 08:14:23

【问题描述】：

在 Div 上使用背景图像时，我无法显示图像的完整高度，既不使用 height:auto; 也不使用 height: 100%。为什么这样？ 我该如何解决这个问题？

我在这里创建了一个 JS Fiddle：https://jsfiddle.net/2d0npz2v/5/

body, html 
  height: 100%;
  margin: 0px;

.imageContainer2 
  background-image: url("http://i.imgur.com/AWi7r5m.jpg");
  background-position: center top;
  background-size: 100% auto;
  height: 100%;

<div class="imageContainer2"></div>

更新 为清楚起见，图像需要 100% 宽度和自动高度（不要在底部剪切）。 此示例有效，但它使用的是“内容”属性而不是“背景图像”：https://jsfiddle.net/j47a6x7s/。我正在寻找相同的行为，但不使用内容。

【问题讨论】：

你必须指定 div 的高度和宽度。

为我工作，你只是忘了设置你的小提琴。

@AlexG，不，图像没有完全显示，图像的某些部分在底部被剪切了。

你的小提琴根本不显示图像？伙计们确实告诉你，你需要在你的容器上放一些高度，对吧？

该死，这很难..但想知道答案:)

【参考方案1】：

你可以使用：

.imageContainer2 
  overflow: hidden;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%;
  margin: auto;
  min-height: 100vh;
  background-size: cover;

【参考方案2】：

  var bgImg = new Image();
  bgImg.src = $('.test').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
  bgImg.onload = function() 
  $('.test').css('height':this.height,'width':this.width);

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="test" style="background-image: url('https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">

</div>

希望这能完全解决您的问题。

【参考方案3】：

您必须使用 IMG 才能做到这一点。为什么要坚持使用 CSS？

例子：

.container img

  width: 100%;
  height: auto;

<div class="container">
  <img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg"/>
</div>

您不能使用 CSS 规则计算 background-image 高度，然后使 DIV 高度相等。 最接近您的问题的解决方案是使用带有所有相关“问题”的背景封面。

更新

另一种 CSS 解决方案可能是 padding-trick 方式，如下所示：

.container

    background-image: url('http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg');
    background-size: contain;
    background-repeat: no-repeat;

    width: 100%;
    height: 0;

    padding-top: 177.77%; /* img-height / img-width * container-width (1920 / 1080 * 100) */

<div class="container">
  
</div>

我还是建议使用第一种解决方案。

【讨论】：

感谢您的回答达里奥，但如果我坚持使用 CSS 是有原因的。我无法为图像（解决方案1）设置 src，因为我需要使用媒体 css 查询替换图像源（并为手机/平板电脑等加载不同的图像）。解决方案2也不好，因为它会裁剪图像的一部分，甚至与在解决方案1中使用带有src的简单标签的结果不同。

不客气，Marco，但遗憾的是没有其他解决方案。您必须构建媒体查询类并插入多个不同的 IMG，这些 IMG 将根据设备分辨率隐藏，如果您需要，我可以为您提供一个示例。顺便说一句，第二个解决方案没有裁剪任何东西，结果与第一个解决方案相同。

您实际上是对的 Dario，很抱歉我没有注意到第二个解决方案中的 padding-top 属性（这可能是最正确的一个 ***.com/questions/600743/…）。但是我不能使用多个不同的图像，否则它们都会被下载（即使它们是隐藏的）。无论如何，感谢您的回答和耐心！

【参考方案4】：

如果您要在背景属性中显示的图像始终具有相同的纵横比，您可以使用explained here 的一种技术使 div 根据宽度与图像保持相同的纵横比.

用你的例子，它看起来像这样：

body, html 
  height: 100%;
  margin: 0px;

.imageContainer2 
  background-image: url("http://i.imgur.com/AWi7r5m.jpg");
  background-position: center top;
  background-size: auto 100%;
  padding-bottom:178%;
  background-repeat:no-repeat;

<div class="imageContainer2"></div>

请注意，我不知道您要达到什么目的。根据上下文，使用这种方法显示图像可能在语义上不正确。

【讨论】：

感谢 web-tiki。我选择了 HerrSerker 的答案，因为他发布的链接正是在解释我的问题，但你的答案也很好。我想要实现的是：不使用 img src，使用背景图像，这样我就可以使用 CSS 媒体查询替换图像源，但我遇到了高度问题......以及与不同浏览器的兼容性。

【参考方案5】：

嗯，这是为什么？

在您的工作示例中，您使用内容。内容有自己的高度并占用空间，页面上的其他元素必须尊重这一点。

使用background-image 解决方案，您可以使用不占用空间的背景。 .imageContainer2 元素无法知道背景图像的高度并自行适应它。

这个问题在这里得到了解决：How to get div height to auto-adjust to background size? 只需检查解决方法是否适合您

【讨论】：

非常感谢@HerrSerker，你是对的，这个问题实际上是在解释同样的问题。

如果您负责 HTML 代码，您可以设置必要的 CSS，例如 background-image、padding-bottom 为内联 <style>。在这种情况下，我建议在 HTML 元素上使用属性 id，这对于 exactly 该元素是唯一的。 imagecontainer2-1234 之类的东西，其中 1234 是该元素的唯一值。不同的图像容器可能有 id imagecontainer2-2345 等等。

是的，当然。感谢您的详细信息！ @HerrSerker

【参考方案6】：

尝试：

body 
    padding: 0px;

【参考方案7】：

试着把这三个给你的.imageContainer2：

.imageContainer2 
  position: fixed;
  width: 100%;
  height: 100%;

小提琴：https://jsfiddle.net/jsse9yL3/

【讨论】：

@SanjayKumarNS position 是需要的朋友。因为div 里面什么都没有。

谢谢@PraveenKumar，但这不起作用，我无法滚动查看图像的完整高度：-/

@MaRco85 所以如果你想要图片的高度，那么你需要将height:设置为图片的高度，而不是100%。

@MaRco85 我遇到过这个。好吧，使用url() 时无法检测图像的高度。对不起！ :)

@MaRco85 无论您做什么，您都可以仅设置相对于边界的高度和宽度。在这种情况下，它是窗口高度。所以如果你想让它与 CSS 一起工作，CSS 没有能力检测图像的大小。