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

    background image also header image cc trick how to do it? [closed]

    How to make custom login button work

    How to use jquery .css in a javascript variable

    how to create a rotateY animation via jQuery and css 3

    how to custmize font awasome icons using cheat sheet in css?

    How to change the included CSS files on button click?

    CSS. Show TFOOT only when TBODY has no rows

    How to include a css class that is an image on codeigniter form submit?

    Angular. How to set css properties for “after” and “before” DOM psuedo elements

    How do I limit the number of cells on a row in CSS

    How to display thick line under header of sub menu using css

    Css overflow-y: how to show only when needed

    How to give a border as a background in css without using image and without adding anything to mark-up?

    How to add contact details next to responsive Google Map

    How do I keep my text on one line in Firefox?

    Css how to create navigation bar

    How can I place html text on top of a canvas flot chart?

    Element width based on how many siblings are present

    How to combine bold and italic in CSS?

    How to style QTableView CSS

    How can I align the tops of two paragraphs in this example without resorting to an empty header? (e.g.,

     

    )

    How do I hide all children except the for the first child in Javascript/JQuery and CSS?

    how to make this fit in same line in css

    How do I make a div with guide lines?

    How to put text in the center of box while using border-box in CSS?

    How make input element take up available space next to a fixed width element?

    JSoup - how to grab a href (url/link) immediately preceding a ?

    How do I uncollapse a margin?

    How to use a custom image for cursor/thumb in html input type range

    WordPress: How to style Title and Excerpt in Display Post Shortcode Plugin