Child images having different height despite having exact same styling

mafioso · August 10, 2020

So I have a grid of .project-tile's, within each there is an anchor and inside that anchor there is an image. I set all of their display property to block, all .project-tile's have exact same dimensions, all child anchors have exact same dimensions, and yet there is an odd child image with odd height like this. It won't take 100% though I give it all. I have 4 of this and 3 behave similarly, except for this one only. It refuses to take the extra real estate that I granted. Can I have an idea what is going on here guys?

If you wonder about the code, here it is: https://codepen.io/hsthanh/pen/zYqGPJM

Thank you very much for helping. Have a good day you all!

Likwid · August 10, 2020

Height is different you can see that in "Filter" options

mafioso · August 10, 2020

That is what I'm trying to say. I set them to be the same and yet they behave differently?

mafioso · August 10, 2020

You see the 2 anchors have same height, and I set 2 child images to have 100% height, and 1 of them decide to take only proportion of it

Likwid · August 10, 2020

Can you please post full code, where you restrict box sizes?

mafioso · August 10, 2020

.project-grid {
  max-width: 1280px;
  margin: auto;
  padding: 50px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  grid-auto-rows: 1fr;
}

.project-tile {
  background-color: orange;
  display: block;
}

.project-tile > a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  line-height: 10rem;
}

.project-tile > a > span {
  text-align: center;
  color: rgb(140, 0, 255);
  font-size: 2rem;
  padding: 2rem 0.5rem;
}

.project-tile > a > img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Likwid · August 10, 2020

I dunno everything works perfect to me

Quote

.project-grid {
max-width: 1280px;
margin: auto;
padding: 50px 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
grid-auto-rows: 1fr;
}

.project-tile {
background-color: orange;
display: block;
}

.project-tile > a {
disckplay: blo;
width: 100%;
height: 100%;
text-decoration: none;
line-height: 10rem;
}

.project-tile > a > span {
text-align: center;
color: rgb(140, 0, 255);
font-size: 2rem;
padding: 2rem 0.5rem;
}

.project-tile > a > img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
</style>
<body>
<nav id="navbar">
        <a href="#welcome-section">Welcome</a>
        <a href="#projects">Projects</a>
        <a href="#contacts">Contacts</a>
    </nav>
    <main>
        <section id="welcome-section" class="main-section">
            <div id="placeholder"></div>
            <div class="header-grid">
                <h1>Hi, my name is Thanh</h1>
            </div>
        </section>
        <section id="projects" class="main-section">

            <div class="project-grid">
                <div class="project-tile">
                    <a href="https://codepen.io/hsthanh/full/xxVbgRB">
                        <img src="https://live.staticflickr.com/65535/50200025633_e4df9fe0d4_o.png" alt="tribute image">
                        <span>Tribute Page</span>
                    </a>
                </div>

                <div class="project-tile">
                    <a href="https://codepen.io/hsthanh/full/LYNEgMg">
                        <img src="https://live.staticflickr.com/65535/50208840286_553ae76b95_o.png" alt="survey form image">
                        <span>Survey Form</span>
                    </a>
                </div>

                <div class="project-tile">
                    <a href="https://codepen.io/hsthanh/full/NWNPeQm">
                        <img src="https://live.staticflickr.com/65535/50209118342_cc46c384dc_o.png" alt="product landing page image">
                        <span>Product Landing Page</span>
                    </a>
                </div>

                <div class="project-tile">
                    <a href="https://codepen.io/hsthanh/full/eYZNJXN">
                        <img src="https://live.staticflickr.com/65535/50208315798_bd6e0767db_o.png" alt="technical documentation image">
                        <span>Technical Documentation Page</span>
                    </a>
                </div>

            </div>
        </section>
        <section id="contacts" class="main-section">
            <div class="contact-list">
                <a id="profile-link" href="https://github.com/sythanhho" target="_blank">
                <img src="https://live.staticflickr.com/65535/50208846606_5bb737d44f_o.png" alt="github logo"></a>
                <span>Technical Documentation Page</span>
            </div>
        </section>
    </main>

</body>

mafioso · August 10, 2020

Yes it works for every single image except that weirdo one. If you click on my pen up there, you can see that this bs image is going crazy..

Likwid · August 10, 2020

1 minute ago, mafioso said:

Yes it works for every single image except that weirdo one. If you click on my pen up there, you can see that this bs image is going crazy..

All sizes are reported same

mafioso · August 10, 2020

1 minute ago, Likwid said:

All sizes are reported same

Little note for you though, this is only a problem on Chrome. If you use Firefox, it always works fine. I bet you're using Firefox

Likwid · August 10, 2020

4 minutes ago, mafioso said:

Little note for you though, this is only a problem on Chrome. If you use Firefox, it always works fine. I bet you're using Firefox

Rip, does it look different? or only reports wrong value, because it reported 800+ one time but it was same as others when I measured

mafioso · August 10, 2020

Indeed.. if they don't look weird, I wouldn't even bother looking at the values..

Likwid · August 10, 2020

5 minutes ago, mafioso said:

Indeed.. if they don't look weird, I wouldn't even bother looking at the values..

Got chome, everyting works like it should.

mafioso · August 10, 2020

May I have a screenshot?

I tried on Chrome on my smartphone and it looks exactly the same as this.

I also tried on Chrome on Arch Linux and it won't be any better

colonel_mortis · August 10, 2020

The images are all the same height on that CodePen for me on Firefox Linux (after uncommenting them)

They look weird at the bottom because the image on the left has a black bar at the bottom and the image in the middle has a grey footer, but checking in the dev tools all four have the same height for me. That doesn't quite match what you have in your screenshot though, where the middle image has that orange caption, so I guess you've fixed it now?

mafioso · August 10, 2020

22 minutes ago, colonel_mortis said:

The images are all the same height on that CodePen for me on Firefox Linux (after uncommenting them)

They look weird at the bottom because the image on the left has a black bar at the bottom and the image in the middle has a grey footer, but checking in the dev tools all four have the same height for me. That doesn't quite match what you have in your screenshot though, where the middle image has that orange caption, so I guess you've fixed it now?

As I stated in one comment above, this doesn't provoke any problem on Firefox, only on Chrome.

colonel_mortis · August 10, 2020

55 minutes ago, mafioso said:

As I stated in one comment above, this doesn't provoke any problem on Firefox, only on Chrome.

Oops, my bad.

I've not used CSS grid much, but as far as I can see the problem is that your grid items have no height constraint, so they default to height: auto. The image inside them is being set to height: 100%, so the image is trying to take up as much space as is available. You're then adding extra content (the <span>) after the image, and I think this is exposing a difference in the rendering engine between the two browsers (I think the Firefox behaviour is the correct one, but the spec doesn't appear to define the correct behaviour in this case and there's now not any other reasonable implementations of the web spec to compare to).

I was able to reproduce this in https://jsfiddle.net/jxwdo2h9/ - in Firefox, the bottom blocks are pink because they're not on top of the grid cell, but in Chrome they're purple because they are overlaid.

The fix here I think is to give the rows a defined height that doesn't depend on the contents, either using grid-template-rows (on .project-grid) or by setting height on the cells (.project-tile).

mafioso · August 11, 2020

Yeah if you have a defined height for the grid cell, that would solve everything, but the problem though, is that when you resize the window, the grid cell only resizes width, while height remains the same, which is very odd

I'm just trying to find the reason why having a wrapper (div) around the anchor causes this problem. Because the final solution to this is to remove it, so the grid applies good height to them when the direct child of the grid tile is the anchor, instead of a wrapper.

I think I have finally found the answer.

So basically the way grid row works is that it originally doesn’t have a defined height, so it has to look for “something” to use as a baseline. Because of the way I code this, the direct child of a .project-tile is a div, and a div doesn’t have a defined height either, it has to either anchor itself to the direct parent, or anchor itself to the direct child. But because its direct parent doesn’t have a defined height, it will look for that from its direct child. Also because of the way grid works, it will look for whatever gives the smallest number possible.

Now the direct child of such a div, is an anchor element, and also, the anchor doesn’t have a defined height, so it has to look for that from its direct child, which is its img plus the text, which I originally coded as a p, and later changed into a span.

The final element that could define such a height dimension is the image, because by giving it 100% width, which is the width of the grid tile (defined), and height as auto, or 100%, it will take whatever needed to keep the image ratio. And this image has to be the one that when it takes 100% width, its height is the smallest, which makes sens because I tried to disable and enable every and a few of them at the same time and I observe the very same behavior.

By this moment the image, the anchor, then the div and eventually the grid tile has a defined height, and all the rest divs, images from other tiles could take that as a reference for their height percentage.

Above is my take on what has happened. Probably will be useful in the future.

Sign In

Child images having different height despite having exact same styling

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Featured Topics

Topics

Latest From Linus Tech Tips: