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

    How to completely show hide tabs on onclick event in HTML CSS Javascript

    How to convert all color code #XXYYZZ to shorter 3 character version #XYZ of whole css file?

    How to style this button in CSS to appear pushed down?

    How to check css in unit test

    How to apply a class on
  • when mouse is hovering on it?
  • How to create border bottom with 2 different color?

    How to apply CSS rotate transition around glyph's vertical middle or centerpoint

    How can I click a specific li without an id or class?

    Show a box on top of an image in an HTML page

    How do I center align a div that contains floated elements?

    How to make controlls for epub using HTML 5,JavaScript and CSS?

    How do I filter unwanted CS styles from CS sheet?

    CSS list styling - how to reduce the distance between parent and children of the previous parent?

    How to prevent this H2-tag from half disappearing?

    css + thymeleaf - How to auto-adjust displayed screen size?

    How to make two-coloured stripe using CSS?

    How can I align two different-size pieces of text to the left and right while matching baselines?

    how to test css(3) style property value support, repeat value support?

    How to make hover use border-radius first-child

    How to construct multilevel menu using CSS only?

    CSS: How to position two elements on top of each other, without specifying a height?

    CSS selector: how to select non-element sibling node?

    How can I fade in new HTML elements with CSS [duplicate]

    Why the jaggedness at the end? How to fix the CSS style

    How could I join a smaller and a bigger div with rounded edges?

    How to make Bootstrap sticky footer content go full page height?

    how to apply div on hover my table td

    how to place one div on top of another, when both are centered using auto margin?

    How can I specify relative positioning in HTML?

    how to add two widths to one class in css