How can I get width and height of big image after displaying it on html-page?


Tags: javascript,jquery,html,css

Problem :

I have a big image, in example 10000x8000px. In this case I reduce width and height of image using CSS class .myClass { max-width: 90vw; max-height: 80vh; } How can I get width and height of this image after displaying it on html-page. In example, if I have 1200x800 monitor I want to get result 960x640px using $(img).width() or $(img).height(). Is it possible? When I use $(img).width() or $(img).height() a get natural size 10000x8000px. And img.clientWidth return 0.



Solution :

What I understand is that you want to reduce size of image if it is too big. Assume div.image is an image in the code below and check the code. Use this code to get desired result what you want..

var width = $(".image").width();
var height = $(".image").height();

if(width > 900) {
  
	var newWidth = (width * 80) / 100; // reduce to 80% width
  $(".image").css("width", newWidth);
  
  
}

if(height > 900) {
	var newHeight = (height * 80) / 100; // reduce to 80% width
  	$(".image").css("height", newHeight);
}
.image{
  width: 1000px;
  height: 1000px;
  background-color: blue;
  display:block;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
</div>


    CSS Howto..

    CSS. Parent > Child1:hover. How to display Parent > Child2?

    How to have a horizontal line at the middle of a html heading with CSS?

    How to auto adjust menus height according to container height

    Bootstrap css navbar-inverse dropdown how to change color of checkbox label text

    How to make circle thing in CSS? [duplicate]

    How to give footer background color for the whole width of the browser with fixed parent div

    What is .htc file ?How it works in Internet explorer

    How can I build a flexible ratings widget in LESS instead of straight CSS?

    How to create a image transition hover effect with css without breaking the grid layout

    how to display a dropdown ul two per row

    How to use Materialize css Tabs in Meteor?

    how to bypass style in element that is automatically applied through class?

    How do I auto play my slideshow

    CSS Positioning - How can you fix components in place?

    Contact page Design how to add Bootstrap

    how do i set the text that my json file is printing to screen i want to hide the text

    How to fit your website for all or at lest most screen resolutions?

    How to order rows (or divs) vertically using blueprint css?

    How to read this hover syntax in css?

    How to pass css :active pseudo class to javascript?

    How can I change the size of this box? (CSS)

    How to only select a displayed element using CSS

    How can I get images floated to the left of other definition list elements?

    how to align an element but keep the space it left reserved

    How can I make a table column width somewhat similar automatically?

    how to make nav brand centrally aligned

    How to determine the 'toggle' status of a CSS toggle input?

    How to center navigation that has icons so text is aligned to icons?

    How to change text color for all links in Materialize CSS navbar?

    How to make the opacity layer same size as img