CODEWITHSUNDEEP
htmlcssheight
Sagar Devkota
Sagar Devkota

Reputation: 1315

Set height of images as of other image

There are many questions about setting relative height to image, but non could help me. Here what I have is:

<div>
  <div>
    <img src='/uploads/2017/Linux_Stable.png' style='height: auto; max-width: 90%;' />
  </div>
  <div>
    <img src='/uploads/2017/Open_Source.png'/>
  </div>
</div>

Now, what I want is to set the height of the image Open_Source.png exactly equals to Linux_Stable.png what ever it looks. Is it possible? How could I make it work as expected. There are other contents on each of those div too.

Upvotes: 0

Views: 337

Answers (3)

AbdelRahman Aly Abounegm
AbdelRahman Aly Abounegm

Reputation: 26

You can achieve this using Javascript. Just give each image an id, and then get the height of the first one using DOM.clientHeight for example:

var image1 = document.getElementById("img1");
var image2 = document.getElementById("img2");
image2.style.height = image1.clientHeight;
<img id="img1" src='/uploads/2017/Linux_Stable.png' style='height: auto; max-width: 90%;' />
<img id="img2" src='/uploads/2017/Open_Source.png' />

Upvotes: 1

oRole
oRole

Reputation: 1346

To achieve what you want you could either use CSS to define a class and to set a fixed size for all elements of that class, just like that .. 

/* index.css */
.myImg {
    position: relative;
    float: left;
    width:  200px;
    height: 200px;
}

<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' href='index.css'>
    </head>
    <body>
        <img class='myImg' src='‪A.png'>
        <img class='myImg' src='‪B.png'>
    </body>
</html>

.. or you could use JavaScript to get the images by their class or whatever you like and then modify the width/height attribute of the relevant image, like that:

<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <img class='myImg' src='‪A.png' style='width:100px; height:100px'>
        <img class='myImg' src='B.png'>
        <script type='text/javascript' href='index.js'></script>
    </body>
</html>

// index.js
var images = document.getElementsByClassName('myImg');

images[1].style.height = images[0].style.height;
images[1].style.width = images[0].style.width;

Both methods assure that the images are the same size.

Upvotes: 0

mplungjan
mplungjan

Reputation: 177691

Perhaps if we use a container, the images can have same height as the tallest image - I am not sure how to code that.

Here are two versions

First set's height is decided by CSS as Temani Afif posted, Second set is decided by the first image using JavaScript

.img1 {
max-height: 100px;
}
<img class="img1" src='https://lorempixel.com/200/100/' style='height: auto; max-width: 90%;' id="image1" />
<img class="img1"  src='https://lorempixel.com/200/200/' id="image2"/>
<hr/>
<img src='https://lorempixel.com/200/200/' style='height: auto; max-width: 90%;' id="image1" /><img 
     src='https://lorempixel.com/200/300/' id="image2" onload="this.height=this.previousSibling.height"

Upvotes: 0

Related Questions