How to get image width and height pixel, and make the box as same size?

Question

I want to make a box's(div) width and height as a image same size(DOM)

<div class="box">box</div>
<img src="aa.gif" style="width:50%; height:auto">

This is mobile responsive web. So the image is flexible pixel size.

I am newbie with jquery, so please help

Possible duplicate of [How to get image size (height & width) using JavaScript?](https://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript) — Bhaumik Pandhi, Apr 19 '18 at 16:49
Are these 2 items side by side? If so you can do it easier with css — Huangism, Apr 19 '18 at 16:50

score 0 · Answer 1 · answered Apr 19 '18 at 16:55

0

Hope this snippet will give the solution

<div class="box">box</div>
<img src="aa.gif" id="img" style="width:50%; height:auto"> 
<script>
  $('.box').height($('#img').height());
  $('.box').width($('#img').width())
</script>

answered Apr 19 '18 at 16:55

Adithya

813
1
7
10

score -1 · Accepted Answer · answered Apr 19 '18 at 16:55

This is how you set those style properties in Jquery :

$('div.box').css({"width":$("img").css("height"),"height":$("img").css("height")});

In action :

$(function() {
$("button").on("click", function() {
 $('div.box').css({"width":$("img").css("height"),"height":$("img").css("height")});
 });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><button>Pass properties</button></div>
<div class="box">box</div>
<img src="https://www.w3schools.com/howto/img_fjords.jpg" style="width:50%; height:auto">

How to get image width and height pixel, and make the box as same size?

2 Answers2