Personal portfolio page (image height)

1

Hi,

I had a look at the project called “personal portfolio page” done by free code camp here .

How is the height of each image calculated. It obviously works well as all the images have a similar height. I was wondering how this was achieved.

Line 224 in the css section says : calc(100% - 6.8rem). 100% of what is this based on?. I am a bit confused as a fixed height was not set for any parent containers. Am i missing something?

2

Hello,

the percentage for height, written like that, is based on the parent element. If the parent element has no defined height, then height will take the default value of auto, which maintains the aspect ratio of the image, so the height is calculated from the width.

I made a codepen to explore this a little bit, feel free to ask or tweak it.

1 Like
3

oh wow. I did not know the height depended on the width when it is auto. Thanks for this!

What about the (- 6.8 rem) bit. I played around with it and when it is removed, only some images are affected, the rest look the same. Any ideas why?

1 Like
4

After looking at codepen’s example, there are a few things to add:

  • the width comes from:
.projects-grid {
  display: grid;
/*simplified version*/
  grid-template-columns: repeat(3, 320px);
/*...*/
}

  • So the images width:100% will be 320px , and assuming height is not set yet then height:auto; all images look with the right aspect ratio.

  • The height of the row is defined by the tallest element, or in other words:

The size of the rows is determined by the size of the container, and on the size of the content of the items in the row. Source

Problems start here: the grid will look uneven respect to the images, check image 3 in this codepen [1]

  • To fix this, we add height:100%;. What will happen here? The tallest image of the row will remain unchanged, and the rest (smaller ones), squeezed. (uncomment height:100% in the code)
  • Now object-fit:cover comes into play, uncomment the next line in the code, and the images will all look nice again.

[1] same thing goes for flexbox

1 Like
5

And last,

  • In the example the images are inside an anchor tag which are really the grid children (not the images), and the images are siblings with a paragraph. Like so (i’m not being literal):
<container> <!-- -->grid -->
<a> <!-- child-->
<img>
<p>
</a>
</container>

Now you might wonder why the images take 100% of the anchor tag, and kick out the paragraph I’ve made a pen for you to test this here.

This is just something I found out now, and maybe someone else can be more precise. Because it seems a rather strange behaviour.

  • To finish, the image w-h 100% would cover the full row height, the amount you are taking out (6rem) is exactly the height of the paragraph below.

If this doesn’t make much sense don’t worry. Grids are fixed by tinkering around, and google searching.

1 Like
6

Thanks a lot for the detailed explanation and the examples! :grinning:

  • My expectation was that all images would default to the height of the tallest element when height is not set. (i.e. whatever the height of the tallest element is based on its aspect ratio)

  • When i do uncomment “height : 100%” there is some strange behaviour as the page does not display anything and is blank

1 Like
7

@Layooo

I’ve checked and the code of pen2 was fine. So it might be a browser issue. You can send me a private message if you have any other question. The pen was this one just in case. and for me in Firefox works fine.

Your expectation almost right, if I understand you. In FCC codepen all the grid children have the same height (only across one same row!), and that’s defined by the tallest element, in this case the tallest image (as the paragraphs are all same height). So it’s not the image (those are not direct children and height is auto) but the wrapper. In the one I made for you, images are direct children, but they do not get stretch, in some sense, luckily retain the aspect ratio.

Now as a side comment, I’ve made a change in the codepen

So What is written like so:


  <a >
      <img
        class="project-image"
      
      />
        <span class="code">&lt;</span>
        Tribute Page
<p  class="..."
        <span class="code">&#47;&gt;</span>
</p>
    </a>

Should more safely be written as

  <a>
      <img alt="project" />
        <span class="code">&lt;</span>
        Tribute Page
        <span class="code">&#47;&gt;</span>
    </a>

(removing the paragraph tags)
I’ve modified that, and removed the height altogether, it looks like this now:

.project-image {
  width: 100%;
  object-fit: cover;
}

Yet the text in the span needs to be aligned but that’s easy. The responsiveness works fine too. It’s right here.

1 Like
8

It all looks fine now and yes you were right, for some reason the code pen was not working well in google chrome when (height : 100%) was uncommented . It works fine in safari though! :grinning:

Thanks a lot for the help. This has really helped my css knowledge!

1 Like
9

You’re welcome. now you witness something very interesting, that browsers do not work the same, and we should test our pages (at least in the three main ones: safari chrome ffox).

There are some tools helping for that, one is the autoprefixer, another one normalizer, you’ll surely learn them in the next months.

Good luck.

1 Like