Question

所以我有一个背景图像集的div。但它设置为改变其尺寸以适合页面。有没有办法让我获得已加载的图像的高度并将div高度设置为该值，以便页面的下一部分从图像的底部开始？到目前为止，我一直在使下一部分静止距离，但在某些设备上你几乎看不到图像。

编辑：这是我的CSS代码：

.image-section {
    height: 700px;
    max-width: none;
    min-width: 40%;
    border-bottom: 4px solid #1a80a5;
    background-image: url('../images/CYAF3Wg.jpg');
    background-position: center 60px;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
}

提前致谢。

Answer 1

也许将此图片加载为<img>（隐藏可见性或显示无），加载后您可以检查其宽度/高度（.offsetWidth / .offsetHeight）。

Answer 2

您可以使用img元素，但显示类似于background-image的元素，如下所示：

JS Fiddle＆lt;＆lt;检查控制台，并查看图像的宽度和高度。

即使img-0和img-1宽度值最初为500px - ，您也会看到为什么在img src="../500x350/中 - 但输出宽度具有不同的值，因为这些图像width值由CSS width:100%;控制，因此javascript为我们提供了精确的“当前”宽度。

相同的图像height值，虽然它没有在CSS中设置，但是当我们放置width:100%而没有设置高度时，图像将是相应的，同时仍保持纵横比，你可以看到img-0高度低于img-1高度，因为第一张图片的原始图片为200px而第二张图片img-1的高度为350px，因此输出高度为无论原始高度如何，都代表屏幕上的实际和精确高度。

var imgs = document.querySelectorAll('.container img');

for (var i = 0; i < imgs.length; i++) {
  var image = imgs[i];
  console.log("img-" + i + " Width: " + image.offsetWidth);
  console.log("img-" + i + " Height: " + image.offsetHeight);
  console.log('--------');
}

.container{
  position:relative;
  color:#FF5;
}
.container .innerText{
  position:absolute;
  top:0;
  left:0;
}
.container img{
  width:100%;
}

<div class="container">
  <img src="//placehold.it/500x200/009900/ffffff?text=IMG-0">
  <div class="innerText">
    this text is ABOVE the image..
    <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non corporis dicta quaerat rerum animi .
  </div>
</div>
<div class="container">
  <img src="//placehold.it/500x350/000044/ffffff?text=IMG-1">
  <div class="innerText">
    this text is ABOVE the image Aslo..
    <br>Qui assumenda, itaque laboriosam culpa hic animi, eligendi voluptate similique quis placeat blanditiis, excepturi veritatis maiores ad rem!
  </div>
</div>

Answer 3

将background-size:100%;添加到您正在设置背景图片的CSS代码中。

如果你想要精确的像素，那就用这个：

var img = new Image;
img.src = $('#myDiv').css('background-image').replace(/url\(|\)$/ig, "");
var bgImgWidth = img.width;
var bgImgHeight = img.height;

如何在div加载上获取图像尺寸

3 个答案: