Skip to main content
R
r_tist
Inspiring
July 6, 2022
Question

3 responsive images in a row - one displays smaller than other two

  • July 6, 2022
  • 2 replies
  • 1918 views

The question is for a row of three images, the first image is displaying smaller than the other 2 when viewport begins to flex to smaller breakpoint (around 1199px).

 

.picsMaxWidth {

width: 100%;
height: auto;
max-width: 277px;

}

 

Not sure how to resolve.

If I change rule to .picsMaxWidth img, it does even out; however, responsiveness stops.

 

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
July 6, 2022

For better answers we need to see the HTML code.

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
July 6, 2022

What is the native size of each image?

 

Max-width does not change the native image size beyond it's natural width in pixels.

 

So if image A is 100px and image B is 72px, the max-width of both images will be as wide as the parent container but no more than 100px for image A and 72px for image B.

 

 

 

Nancy O'Shea— Product User & Community Expert
R
r_tistAuthor
Inspiring
July 8, 2022

216px x 159px - same size for all three.

 

This is the code for that area in question, tucked within a responsive table:

   .table {width: 100%; max-width: 100%; margin-bottom: 20px;}

 

<tbody>
<tr>
<td><img class="picsMaxWidth" src="images/product5.jpg" alt="5"></td>
<td><img class="picsMaxWidth" src="images/product15.jpg" alt="15"></td>
<td><img class="picsMaxWidth" src="images/product50.jpg" alt="50"></td>
<td></td>
</tr>

</tbody>

Liam Dilley
Liam Dilley
Inspiring
July 11, 2022

You can call it whatever you wish (duck, cat, fish...) but that's not a responsive table. 

 

It's an unsightly hack with negative margins, absolute positioning and hidden table headers among other less conventional contrivances like putting content into CSS (#%&!???).  Egads, what will they think of next?

 

This hot mess can be avoided entirely by not using tables in the first place.  One certainly doesn't need a table for 3 images.

 


Is it a mess and a bit pointless? YES. 
Does it involve negative margins, absolute positions etc? 

Nope.
A table element like td can become flex and block just like any other element in today's HTML5 and CSS, so less hacky then in the past but as you and others pointed out - Defiantly not be messing around and just do proper semantic markup in the first place 🙂

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices