While developing the website for Code Camp Wellington 2019, I ran into an odd problem - the images for our organizing team were being squished on narrow format screens.

The aspect ratio of each image was wrong. Each image was being shown at the correct width, but with an excessive height.

Searching online for an answer, I found a lot of suggestions - but none of the fixes seemed reliable, with some folks reporting that they worked, and others complaining that they didn’t. Not one of the fixes seemed to work in every case.

Many of the suggested fixes were browser specific, but my problem showed up on every browser I tested: Google Chrome, Microsoft Edge, Mozilla Firefox, and Apple Safari. This lead me to suspect the problem was something systemic, rather than a genuine bug.

I had a bit of a breakthrough when I discovered that the markup I was using for each organizer worked perfectly when used standalone. It only failed when embedded within the Bootstrap grid.

What I discovered was this: the images were inheriting markup rules used for the Bootstrap Grid, including an incorrect height setting.

The fix was to override the styling for each image by adding style="height: auto;" to each one:

<div class="portfolio-caption">
    <img class="img-fluid mx-auto rounded-circle"
         style="height: auto;"
         src="img/team/.jpg"
         alt="">
    <h4></h4>
    <p class="text-muted"></p>
</div>

(For the Code Camp, I used Jekyll to generate a static website - this is why the sample shown above includes Liquid template markup.)

With this present, the images retained their normal aspect ratio:

Comments

blog comments powered by Disqus
Next Post
Add Word Screen  04 May 2019
Prior Post
WPF Projects & ViewModelBase  20 Apr 2019
Related Posts
Using Constructors  27 Feb 2023
An Inconvenient API  18 Feb 2023
Method Archetypes  11 Sep 2022
A bash puzzle, solved  02 Jul 2022
A bash puzzle  25 Jun 2022
Improve your troubleshooting by aggregating errors  11 Jun 2022
Improve your troubleshooting by wrapping errors  28 May 2022
Keep your promises  14 May 2022
When are you done?  18 Apr 2022
Fixing GitHub Authentication  28 Nov 2021
Archives
April 2019
2019