Personal Portfolio help with Image

Personal Portfolio help with Image
0.0 0

#1

My image is way too big. I want it to begin under the navbar and have a height that reaches from the navbar to the bottom of the page so that you do not have to scroll down to see the whole image. How can I do this?


#2

In your case it’s a little bit difficult, because you are using the <img /> element to show the image. In cases like this, I would recommend to embed images using background-image, but that’s another topic.

Your problem is basically that your image has a fixed width and height (aspect ratio), for example 1920x1080. Every image has its dimensions, and the web developers problem is to make it fit into the website the way they want.

Thanks to CSS3, there are new techniques to do so. For your image, write the following CSS:

#Kaija {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: bottom;
}
  1. I removed the display: grid and grid-template-column: 1fr, because this doesn’t apply for images, there is no use.
  2. height: 100vh is used to make the image have the same height as your browsers viewport (or window). vh is a CSS unit and is always relative to the height of your browser window. So, if your browser window (viewport) is 1000px high, that’s the value it takes. If you resize your browser window and the height increases/decreases, the vh unit will adapt accordingly. Here are more information.
  3. Now, after adding the height: 100vh, you will see that the image stretches over the entire page, but no further. But it looks ugly, because it’s shrinked to fit. There is a quite new property called object-fit, which helps with that. Setting object-fit: cover will basically tell the image to keep its aspect ratio, but still fit into the given dimensions. It does that by realigning the image.
  4. There’s one more issue: the art direction. You might find it looking good, but in some cases you want to change the position, or anchor point, from where the image is aligned (so that you are in the center of the image and not the sky). object-positionsets this very anchor point and therefore makes it look nicer.

I hope that I could explain the above code, it might be a bit confusing first but is definitely worth knowing.


#3

You could make the first section 100vh and make the image the background image.
After that you can set the background-size to cover and the background-repeat to no-repeat.
Not too sure if that would look good though.


#4

Wow! Thank you so much for explaining everything. It’s great to know what to do and why I’m doing it. Super helpful =D