CODEWITHSUNDEEP
cssstyling
Paul Weiss
Paul Weiss

Reputation: 29

How to prevent images from being too large at lower resolutions?

Hello. I am having troubles with the format of how the three elements are presented! The html {font-size: 62.5%} in the styling is decreasing the font size of the entire page.

When I disable html {font-size: 62.5%} the three element are getting wider! Almost widescreen! It is getting too big! I wonder why the font-size: 62.5%; having such lot of effect how the 3 blocks are formatted! font-size: 62.5 is a font setting?

There is not text inside for the moment, but it still has effect on it. Why is the line so important for the presentation of the 3 blocks. Hope it is clear for everybody and someone could help me with this.

link

Upvotes: 1

Views: 1746

Answers (2)

John
John

Reputation: 13759

Fonts based on the html and/or body element are relational and like any other CSS properties and values applied to those selectors are inherited. There is a whole thing about relative font sizes and the CSS em unit. Arno's answer covers it pretty decently.

This is mostly to get you moving forward with less code. You can make the images scale with resolution. I'm at 2560x1440 so I had to downsize the browser window to see the issue. You should remove the width property and instead use max-width: 33%; (for specifically three images) which scales nicely without even needing CSS media queries for mobile.

Go easy on those div elements! I also highly recommend familiarizing yourself with what stable aspects of CSS are available, it's a great time to be a newbie compared to 15 years ago! I added CSS Flex (Grid isn't as mature yet) and it's extremely powerful once you get around it's quirks.

div.card
{
 display: flex;
 justify-content: space-evenly;
}

div.card img
{
 display: block;
 height: 18rem;
 max-width: 33%;
 object-fit: cover;
}

<div class="card">
<img alt="Snowy Mountains" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />
<img alt="Desert" src="https://images.unsplash.com/photo-1485160497022-3e09382fb310?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />
<img alt="Canyons" src="https://images.unsplash.com/photo-1506318164473-2dfd3ede3623?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />
</div>

Upvotes: 2

Arno Tenkink
Arno Tenkink

Reputation: 1528

The font-size: 62.5% is a critical part of how this layout work, this is because it's rem based. rem units are based on font-size on the root of the document to inherit it's value. Setting the font-size to 62.5% means 1rem is equal to 10px.

More about rem uses and styling here: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/.

There are two ways you can solve this.

Changing all your font sizes to rem units. (my pick)

You can change the font-sizes from 16px to 1.6rem. etc.

Change rem unit to em and set parent font-size

You can also remove the font-size: 62.5% from the html selector to #global-3blocksfancy and change the rem to em this means the parent element (global-3blocksfancy) font-size will determine the size of the other elements.

Upvotes: 1

Related Questions