Question

我有一个横幅部分：

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

<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="banner image" class="bannerImage" />

因此，我使用width 100%和height auto的图片，而不是使用背景图片。

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

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

Answer 1

在其中添加图片并将其隐藏（使用opacity:0;）。这样它就适合

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

你可以试试这个。父元素:after将为父height提供padding。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

如果想坚持背景图片。我需要Javascript，请查看此内容。

＆＃13;

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")
});

＆＃13;

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

＆＃13;

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

＆＃13;

设置背景图像宽度100％自动高度

4 个答案: