Finding the width or height of an image that is dynamically determined by its proportions using JQuery

Question

Finding the width or height of an image that is dynamically determined by its proportions using JQuery

Using the "img" tag with only a width value in CSS will automatically calculate the height proportionally.

However, finding the height value using developer tools or jQuery's height() method may not work as expected. See the example below:

HTML code

<img id="cat" src="./cat.png"/>

CSS code

img#cat {
    width:10em;
}

jQuery code

$(function() {
    alert($('img#cat').height());  // Returns 0 due to no explicitly declared height value
});

Is there a suitable jQuery alternative for determining the image height?

jquery css image height width

Answer 1

Answer №1

Before the image has finished loading, you are attempting to access it. Here is a suggested alternative:

$("#cat").load(function() {
  console.log("Height of the image: " + this.height)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="cat" src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a_400x400.jpeg">

Answer 2

Before the image has finished loading, you are attempting to access it. Here is a suggested alternative:

$("#cat").load(function() {
  console.log("Height of the image: " + this.height)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="cat" src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a_400x400.jpeg">

Finding the width or height of an image that is dynamically determined by its proportions using JQuery

Answer №1

Similar questions

Is there a way to modify sections of an href link depending on the URL selector?

Elegant Box 2 - Ascending to the top when clicked

javascript functions failing to execute once the page has finished loading

Create a vibrant stroke and conclude with a circular marker beneath the content with CSS

Tips on replacing a React component's styling with emotion CSS

What is the proper way to showcase an element positioned absolutely within a Dialog window using material-ui?

Progressing with JavaScript: Implementing Sound Controls and Dynamic Image Switching

Firefox failing to display CSS files on web pages

Leveraging Django's JSONResponseMixin for handling AJAX responses

What causes an "Internal Server Error" when attempting to use data for a database request with AJAX GET/POST in Laravel?

Uh-oh, Ajax encountered a 500 Internal Server Error!

Set the style of the mat-select element

Position the div beneath another div using the display:grid property

Grin schedule module JSON stream

Having trouble retrieving AJAX response data using jQuery

What is the best way to increase the size of the input field to allow for more typing space?

There seems to be an issue with the functionality of Angular Material on iOS devices

CSS: Indication that the Text is Extending Beyond its Container

Center text in form-control items on Bootstrap 3 grids

Verifying the "select" dropdown option prior to final submission