CODEWITHSUNDEEP
cssimageheight
Jordan
Jordan

Reputation: 237

Responsive images side by side different widths but same height

I am trying to get two images of different widths to be the same height. I've saved the images at a size so that they appear at the same height when at full width (1140px) but you will notice when the browser gets smaller, the images don't stay the same height. I am really stuck! Any help would be much appreciated.

Here is the fiddle http://jsfiddle.net/jn7g1qxg/

Open to using java or anything!

html 

<div class="wrap">

<div class="row">
    <div class="col-66">
         <div class="col-inner">
         <img src="http://i58.tinypic.com/21jvj0y.jpg">
         </div>
    </div>

       <div class="col-33">
         <div class="col-inner">
         <img src="http://i57.tinypic.com/alovbq.jpg">
         </div>
    </div>
</div>

</div>

css

.wrap {
    max-width:1140px;
}

img {
    max-width:100%;
}

    .col-33 {
        float:left;
        width:33.3%;
    }

    .col-66 {
        float:left;
        width:66.6%;
    }

    .col-inner {
        padding:0 20px;
    }

Upvotes: 0

Views: 1742

Answers (1)

Alan Mulligan
Alan Mulligan

Reputation: 1198

Set the height in img

img {
max-width:100%;
height: 200px;
}

http://jsfiddle.net/jn7g1qxg/2/

Upvotes: 1

Related Questions