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

Enthusiast ,
Jul 06, 2022 Jul 06, 2022

Copy link to clipboard

Copied

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.

 

TOPICS
Bootstrap , Code , How to

Views

141

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 06, 2022 Jul 06, 2022

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jul 08, 2022 Jul 08, 2022

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 08, 2022 Jul 08, 2022

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 08, 2022 Jul 08, 2022

Copy link to clipboard

Copied

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 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 08, 2022 Jul 08, 2022

Copy link to clipboard

Copied

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>

 

image.png

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 09, 2022 Jul 09, 2022

Copy link to clipboard

Copied

quote

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

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

By @Nancy OShea

 

it doesn't matter who said what first... I was only posting about the fact that you had announced that the tables were NOT responsive... codepen's link demonstrates the opposite... but once again, I'm not trying to argue... let's just try to recognize a cat when we hear meow

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 09, 2022 Jul 09, 2022

Copy link to clipboard

Copied

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

image.png

 

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.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 09, 2022 Jul 09, 2022

Copy link to clipboard

Copied

60622_1392890063.jpg

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 09, 2022 Jul 09, 2022

Copy link to clipboard

Copied

Sorry, you have got one image (question mark) too many and the first one is smaller than the others. Whoever marked this correct needs to be put in the naughty corner 😂

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 10, 2022 Jul 10, 2022

Copy link to clipboard

Copied

I am glad to see that the conjunction of these question marks, with the polymorphic and repeated encapsulation of the various images could contribute to solve this mystery of alignment regularity


I had however thought of another approach... well it's experimental, but I promise... I've often seen this in various large ... big... very big... site.... https://demo.puce-et-media.com/r_tist/ ...

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 10, 2022 Jul 10, 2022

Copy link to clipboard

Copied

At least you left one image without embedded style rules:

 

whatsgoingonhere

 

Edit: The first time that I came across something similar was when I used Dreamweaver extensions from Webassist. They used the image tag to prove legitimate useage of the extensions. Later on I realised that image tags within an email were used to track the email. Interesting concept.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 10, 2022 Jul 10, 2022

Copy link to clipboard

Copied

LATEST

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 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 10, 2022 Jul 10, 2022

Copy link to clipboard

Copied

Can tables become responsive? YES

Should you use Tables and then do the work to make them responsive when not using data designed to be for a table? 100% NO

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 10, 2022 Jul 10, 2022

Copy link to clipboard

Copied

Not 100% true. If the container is over 100px the image will scale up in the sense it will streatch to fit and if less than the container appear pixelated of course.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 06, 2022 Jul 06, 2022

Copy link to clipboard

Copied

For better answers we need to see the HTML code.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines