CODEWITHSUNDEEP
javascripthtmlcss
Dart2112
Dart2112

Reputation: 19

How to get image dimensions on div load

So I have a div with a background image set. but its set to change its dimensions to fit the page. is there a way for me to get the height of the image that has been loaded and set the div height to that so that the next part of the page starts at the bottom of the image? So far I've been making the next part a static distance down, but then on some devices you can barely see the image.

EDIT: here is my CSS code:

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

Thanks in advance.

Upvotes: 2

Views: 89

Answers (3)

Mi-Creativity
Mi-Creativity

Reputation: 9654

You can use img elements but display them similar to background-image, something like this:

JS Fiddle << check the console, and see images width and height.

You'll see that even though img-0 and img-1 width values are originally 500px -hence why in the img src="../500x350/- but the output width has different values because these image width values are controlled with CSS width:100%; so javascript is giving us the exact "current" width.

Same for the images height values, although it is not set in CSS, but when we put width:100% without setting height the image will be respective while still maintaining the aspect ratio, yo ucan see that img-0 height is less that img-1 height because the first image has original image of 200px while the second image img-1 has 350px height, again the output height is representing the actual and exact height on the screen no matter what the original height is.

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>

Upvotes: 1

Rahul Kumar
Rahul Kumar

Reputation: 2344

Add background-size:100%; to your CSS code where u are setting background image.

and if you want exact pixel then use this :

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

Upvotes: 0

Ryba
Ryba

Reputation: 41

Maybe load this image as <img> (with visibility hidden or display none) and after it loads You can check it's width/height (.offsetWidth / .offsetHeight).

Upvotes: 1

Related Questions