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

Forum|Forum|4 years ago
July 6, 2022
15 replies
1940 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 is closed to new replies. Start a new post to keep the conversation going.

Nancy OShea

Community Expert

For better answers we need to see the HTML code.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

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

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;}

Nancy OShea

Community Expert

Sorry but Tables are NOT responsive. At some point they invariably break down due to borders & cell padding and the max-width limits you imposed.

Do yourself a favor and ditch the table. If you require a layout container for images, use CSS Flexbox or Grids.

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.