CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3responsive-design
Raul
Raul

Reputation: 1024

How do I make 2 images (same height different width) shrink proportionally

I have the following designenter image description here

How do I keep these 2 images stay side by side and when the browser shrinks the two should shrink proportionally maintaining the proportion and height. Can't use bootstrap columns properly and display inline-block isn't working for me either. This is driving me crazy. Can anybody help me?

Upvotes: 0

Views: 447

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

Give a % width to each according to their ratio.

img {
  padding: 1%;
  width: 64.3%;
}
img + img {
  width: 31.5%
}
<img src="http://lorempixel.com/940/400" /><img src="http://lorempixel.com/460/400" />

Upvotes: 1

Jason
Jason

Reputation: 696

https://jsfiddle.net/2028L68u/1/

CSS - 

    img{
  display:inline-block;
}
#img1{
  width:67%;
  float:left;
}

#img2{
  width:33%;
  float:left;
}

HTML - 

<img id="img1" src="http://www.sixdegreesdigitalmedia.com/wp-content/uploads/2016/06/Google-Tools-part-two-940x400.jpg" />
<img id=img2 src="http://kitengelaterraces.com/wp-content/uploads/2015/09/Slider-460x400.jpg"/>

Upvotes: 1

Related Questions