Keep aspect ratio when resizing Bootstrap columns

HTML & CSS
1

Hi,

So in Bootstrap, I made this:

1227×349 567 KB

As you can see, it looks pretty good on a large screen, but on a smaller screen it looks like this:

911×351 442 KB

The aspect ratio isn’t preserved and I would like to keep columns in 4:3. Is there any way to achieve this using CSS?

Codepen demo

2

Hi,

I actually prefer what you have now but if you want to maintain the height and width relationship of the image then you need to use the padding method as shown below.

#games{
  height:auto;/* was 300px*/
}
#games div{
  height: auto;/* was 100% */
  position: relative;
  text-align: center;
  padding:18.75% 0 0;/* create relationship between width and height */
}
@media screen and (max-width:767px) {
	#games div{padding:75% 0 0}	
}
#games p{
  width: 90%;
  left: 5%;
  padding: 10px;
  position: absolute;
  color: white;
  font-size: 1.6em;
  border: 1px solid white;
  border-radius: 5px;
  bottom: 10%;/* 50px is to tall on smaller screens */
}

Or simply remove the background images into foreground images and size the image at width:100% and height:auto;

2 Likes
3

@Thibault,

Be aware that to use the foreground technique, these 16x9 images will have to be cropped to have a 4x3 aspect ratio

1 Like
4

The padding technique is very interesting and works really well, thanks!

And thanks for the tip @ronpat, I’ll keep it in mind :smiley:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.