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
  • 1893 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>

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
July 8, 2022
quote

Sorry but Tables are NOT responsive.

By @Nancy OShea

 

well, without wanting to enter into a polemic, it all depends on the point of view, or on what we mean by putting NOT in capital letters... here in France, it gives a categorical NO... so it means TABLE are not at all responive...

however, on closer inspection, TABLE can be somehow responsive, it all depend on our abilities using CSS, and having common sense on presenting datas
https://css-tricks.com/responsive-data-tables 


May I point out that it was the OP who used the term first.

"...tucked within a responsive table..."

 

Table rows do not break to another row when content exceeds available space.  And  so-called responsive tables are a last resort as they rely on coding hacks to truncate content or reveal scrollbars, neither of which are ideal.

 

This works with all devices:

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>
.grid_container { 
display: grid;
grid-column-start: col 0;
grid-gap: 1.5%;
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
grid-template-rows: repeat(auto-fit, 1fr);
}

.grid_container img {
vertical-align: baseline;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="grid_container">
 <img src="https://dummyimage.com/216x159>" alt="placeholder">
 <img src="https://dummyimage.com/216x159>" alt="placeholder">
 <img src="https://dummyimage.com/216x159>" alt="placeholder">
</div>
</body>
</html>

 

 

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices