设置背景图像宽度 100% 高度自动答案

【问题标题】：Set Background image width 100% height auto设置背景图像宽度 100% 高度自动
【发布时间】：2016-11-10 19:08:27
【问题描述】：

我有一个这样的横幅部分：

.bannerImage {
    width: 100%;
    height: auto;
}

&lt;img src="http://www.w3schools.com/css/trolltunga.jpg" alt="banner image" class="bannerImage" /&gt;

所以我没有使用背景图片，而是使用带有width 100% 和height auto 的图片。

现在我想在横幅部分添加横幅标题。因此，由于仅使用图像无法达到效果，因此我现在使用background-image 属性。但是对于背景图像，我想要与图像相同的布局。背景应该总是宽度为 100%，高度应该是自动的。下面是我的方法。如您所见，该部分会根据内容的高度进行调整。是否可以将它的高度设置为图像的高度。

.bg_banner_image {
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}

&lt;div class="bg_banner_image" style="background-image: url('http://www.w3schools.com/css/trolltunga.jpg')"&gt;some content here&lt;/div&gt;

【问题讨论】：

容器是空的，所以为什么容器从背景图像中获取高度，如果你需要容器与背景图像高度相同，那么你必须给它们高度，否则将一些内容放在容器中
我希望容器采用背景图像的高度而不是其中的内容

标签： css

【解决方案1】：

在其中添加图像并将其隐藏（通过使用opacity:0;）。让它适合

.bg_banner_image {
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.bannerImage {
    width: 100%;
    height: auto;
    opacity:0;
}

<div class="bg_banner_image" style="background-image: url('http://www.w3schools.com/css/trolltunga.jpg')">
<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="banner image" class="bannerImage" />
</div>

【讨论】：

【解决方案2】：

.bg_banner_image {
    height: auto;
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    position:relative;
}
.bg_banner_image img {
  visibility: hidden;
}
.content {
  position: absolute;
  top:0;
  color: white;
}

<div class="bg_banner_image" style="background-image: url('http://www.w3schools.com/css/trolltunga.jpg')">
<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="banner image" class="bannerImage" />
<div class="content">
  SOME BANNER CONTENTS
</div>
</div>

【讨论】：

【解决方案3】：

你可以试试这个。伪元素:after 会给父元素一个height，因为它的padding。

.bg_banner_image {
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.bg_banner_image::after {
    content: '';
    display:block;
    padding: 15%;
}

&lt;div class="bg_banner_image" style="background-image: url('http://www.w3schools.com/css/trolltunga.jpg')"&gt;&lt;/div&gt;

【讨论】：

容器仅对填充 15% 可见

【解决方案4】：

如果想坚持使用背景图像。需要 Javascript，在我看来，请查看这个。

var x = document.getElementsByClassName('bg_banner_image')[0],
  y = x.style.backgroundImage;

function imgSize(url) {
  var img = new Image(),
    /*in case url passed is in url(blablabla)*/
    rege = /^url\(['"](http[s]?:\/\/.*)['"]\)/,
    url = rege.test(url) ? url.match(rege)[1] : url;

  var p = new Promise(function(res, rej) {
    img.onload = function(e) {
      res({ /*return height and width of original image*/
        height: e.target.naturalHeight + "px",
        width: e.target.naturalWidth + "px"
      });
    }
    img.onerror = function(e) {
      rej("error");
    }
    img.src = url;
  });
  return p;
};

/*trying to get original image width and height then change the height of div*/
imgSize(y).then(function(o) {
  x.style.height = o.height;
}, function(err) {
  console.log(err, "dunno")
});

.bg_banner_image {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

<div class="bg_banner_image" style="background-image: url('http://www.w3schools.com/css/trolltunga.jpg')">some content here</div>

<!--for comparison only-->
<img src="http://www.w3schools.com/css/trolltunga.jpg" width="100%" height="auto">

【讨论】：