CODEWITHSUNDEEP
javascripthtmlcssimage
WheresWardy
WheresWardy

Reputation: 455

Dynamically resize side-by-side images with different dimensions to the same height

I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in CSS from everything I've seen (although possibly with the flexbox model, but I don't know enough about it to say) so I may need a JavaScript solution, but the ones I came up with failed due to either not knowing the overall height of the bounding box, or the fact that adjusting the height of the images affected the height of the bounding box which meant it was constantly re-adjusting itself.

This is an example of arbitrary image heights: https://jsfiddle.net/c6h466xf/

And this is what I'm trying to achieve (although obviously without hard-coding the widths, I want those to be resolved dynamically): https://jsfiddle.net/c6h466xf/4/

This is what I'm starting with (links to JSFiddle need code):

CSS

div.container {
    width: 100%;
}

 div.container img {
    width: 49%;
 }

HTML

<div class="container">
    <img src="http://i.imgur.com/g0XwGQp.jpg">
    <img src="http://i.imgur.com/sFNj4bs.jpg">
</div>

EDIT: I don't want to set a static height on the container element, because that stops it from responding to the width of the overall page, so that the images resize dynamically to each other and responsively to the width of the page, so their total combined width is always (for example) 80% of the page width whatever the viewing device.

Upvotes: 4

Views: 2502

Answers (4)

Alpesh Panchal
Alpesh Panchal

Reputation: 59

This should be a simple code, check the following:

HTML code:

<table class="Table">
    <tr>
        <td><img src="images/1.jpg"/></td>
        <td><img src="images/2.jpg"/></td>
        <td><img src="images/3.jpg"/></td>
        <td><img src="images/4.jpg"/></td>
    </tr>
</table>

CSS:

table { width: 100%; }
table img {
   max-width: 100%; max-height: 100%; padding-left: 5px; border: none;
}

Upvotes: 0

Mukund Pradeep
Mukund Pradeep

Reputation: 29

Set a class for your images:

<img src="http://i.imgur.com/g0XwGQp.jpg" class="example" >
<img src="http://i.imgur.com/sFNj4bs.jpg" class="example" >

Then you need to set the height of your container:

div.container {
    height:200px;
}

In your JavaScript:

var yourImg = document.getElementsByClassName("example");
if(yourImg && yourImg.style) {
    yourImg.style.height = '100%';
    yourImg.style.float = 'left';
}

Upvotes: 0

Jamie Barker
Jamie Barker

Reputation: 8246

If it's responsive, use percentage heights and widths:

html {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
div.container {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}
div.container img {
  max-height: 100%;
}
<div class="container">
  <img src="http://i.imgur.com/g0XwGQp.jpg" />
  <img src="http://i.imgur.com/sFNj4bs.jpg" />
</div>

Upvotes: 1

Andrew
Andrew

Reputation: 1880

You could set it by height. Give your container div a fixed height.

Here is a solution for you:

div.container {
    height:200px;
}

div.container img {
    height: 100%;
}

JSFIDDLE

You have 2 other options to get all your images to the same height:

You can place an overflow:hidden on the container div

Or

Clip your images to the same size: http://www.w3schools.com/cssref/pr_pos_clip.asp

Upvotes: 1

Related Questions