How to style top images in css-grid-based websites?

[bendqh1]

I am not in any way a graphic designer or a website designer and I have a website design case in which I have no idea how to proceed.

I have a website built with the Drupal CMS or framework and its core theme Olivero.
The Olivero theme is based on the grid CSS command and I think it makes design very hard for non designers because layout is dynamic at least by screen size and content amount in the webpage itself.
I am very reluctant to change the Olivero theme Twig-CSS source code because it’s very complex and start messing with it as a non website designer can cause broad mistakes.

In one of the webpages, I have putted an image at the top of the webpage to give some “style” to the webpage.
In mobile devices it looks fine but in desktop devices the image looks very large, so large that one might have to scroll down to view the small text right underneath it.

Here is an example of how I need to scroll down on my desktop computer with Microsoft Windows 11 Home, and a plain window of Google Chrome:

Above the fold look of the webpage:

Under the fold look of the webpage:

My problem

My problem is that it looks too large to me and I fear that in larger desktop screens it will look even larger and worse due to the nature of the CSS grid layout of the Olivero theme.

How to style top images in css-grid-based websites?

• I can make the image a 50% width side image, but in this particular webpage I don’t want a side image, I want a 100% width image.

• The following command pattern made the image to look awful, very squeezed:

@media screen and (min-width: 999px) {
   .myImg {
        max-height: 500px;
    }
}

• The following command pattern cropped the image nicely but caused other top images to appear strange.

@media screen and (min-width: 999px) {
	.myImg {
		object-position: top;
		object-fit: cover;
		width: 100%;
		height: 400px;
	}
}

What else can I do?

If there was some CSS artificial intelligence rescaling tool it could have helped me, as it was rescaling the image too look sharp on max-height of 250px to 500px, but as of today I don’t know any such tool.

Cropping and compressing each top image with an image manipulation tool like GIMP is not something I want to do because I have several similar top images and I don’t want to start manage their versions (uncropped and cropped) in folders.

A whole different approach

If I have to keep top images so “big and tall” so they’ll look sharp and not pixelated, at least in desktop devices, then maybe I should find a whole other approach here.

Maybe I should use JavaScript somehow to print the image alt text or the image mouse hover title text on top of the center of the image.

Maybe I should do something totally different.

In your opinion, what should I do in this case?

[DaveMaxwell]

@bendqh1

@media screen and (min-width: 999px) {
   .myImg {
        max-height: 500px;
    }
}

Shouldn’t that be max-width?

[bendqh1]

max-width: 500px will make the image small and will cause large empty space aside it.

[PaulOB]

@bendqh1

A whole different approach

Yes

You are throwing around magic numbers like they are going out of fashion? You mention, 250px, 400px, 500px and so on as though they relate to something. They don’t .

There are no set sizes for devices as there hundreds of them all at different sizes and orientation. Making assumptions that 250px fits mobile or 400px fits tablet is nonsense. Not to mention phones and tablets can be turned around to produce a different size again.

The same goes for desktops except that desktop sizes can be almost any size as many don’t use a maximised browser window. I always have at least 4 windows open and arranged so I can view each.

Therefore you can’t really pluck a magic number out of the screen and expect that it won’t cause your user to scroll.

What you need to do is base your approach on something that is consistent for all and that means for a hero image you could use a vh unit for the height to make sure the image fits in the viewport. 100vh = 100% of the viewport height. That would be consistent for everyone.

You’d then use the object fit rule to crop the image to that available height and width. Of course the image will look different when cropped but it won’t be squashed or stretched.

@bendqh1

rescaling the image too look sharp on max-height of 250px to 500px,

For responsive images you need the best optimised large image size and then it can scale smaller without loss of quality. There are always compromises but usually you can find a sweet spot. Don’t scale small images larger.

If you really want art direction control then you can use the picture element and srcset to deliver different images targeted to different resolutions. However that is a lot to manage and best avoided unless you have no choice or have a system set up to cater for this.

You do need to choose images carefully as some simply are not suitable as responsive images.

[bendqh1]

@PaulOB

You do need to choose images carefully as some simply are not suitable as responsive images.

How do website designers do that?

[PaulOB]

@bendqh1

How do website designers do that?

With some practice and a bit of logic

The important focal part of the image should not be the whole image but rather a section inside the image which when cropped still stays usable. Look at the 3 main images in this codepen and although they are different sizes the man with the dog is viewable in each. Its just the scenery that cuts off. If you choose images carefully you can usually find a sweet spot that works well across a wide range of devices.

This example is just a one minute mock up but shows that one image can work quite well across a wide range.

Iphone SE size:

Wide desktop:

You can read up on responsive images on the MDN site which is a good start and explains about art direction and the picture element.

Responsive images - Learn web development | MDN

@bendqh1

I have a website built with the Drupal CMS

I don’t know anything about Drupal but don’t they have some built in responsive image strategies?

[bendqh1]

I normally use only the Drupal core, without installing any addons.

[bendqh1]

@PaulOB I can’t rally control the Drupal HTML-Twig markup.
In this case, I just copy-paste images into a WYSIWYG editor and I abstain from wrapping their img tag in any other tag in the WYSIWYG editor source code edit mode, so to keep the WYSIWYG markup as native as possible.

[PaulOB]

If you have a link to the actual page then I may be able to suggest a css only improvement.

It may be that you need to invest some more time in learning how to modify drupal and its themes so that you aren’t working with your hands tied behind your back

[bendqh1]

To get a direct example of the problem of large image size in desktop devices, Please check this webpage.

I think that Drupal core doesn’t have anything to do with it because it doesn’t have any graphic design tools.
Twig theming is a topic I relate to graphic designers with speciality in web design and I am definitely not one of these guys.

[PaulOB]

@bendqh1

To get a direct example of the problem of large image size in desktop devices,

There’s a big problem in that page in that you let it get much too wide. The line lengths are so looooong that they are impossible to read easily.

I would consider putting a max-width on your .page-wrapper of about 1600px (and margin:auto to center it). Then look at your articles and try not to have them stretching over 75 characters.

For your large image you could do the following to stop it getting too big. (Note that you didn’t add a unique class to the image so that makes it awkward to target and you end up with a nonsense selector like this).

#block-globalrs-content > div > article > div > div.text-content.clearfix.field.field--name-body.field--type-text-with-summary.field--label-hidden.field__item > img {
max-height:70vh;
width:100%;
object-fit:cover; 
}

However it might be better to use object-fit:contain and then add a black background or gradient to it. That’s really a design choice though.

This image is 3.6 mbyte and I would never use an image more than 500k. You do really need to optimise that image down to something sensible.

The main problem is that you are letting the page get too wide and just because its responsive doesn’t mean that it should be 5000px wide if someone has a big screen unless you changed it into multi columns of readable line length. These are basic design considerations and something that you need to think about as usability is more important than eye candy (although its nice to have both).

[bendqh1]

@PaulOB

I very much agree with you about images file sizes and usually upload pictures weighing no more than 1 MB but somehow it totally escaped from me that this picture is about 4 MB.

Anyway

max-height:70vh;
width:100%;
object-fit:cover; 

This really improved the appearance of the picture but made some other top-in-article-images to look a bit odd like cropped in the wrong places.

Changing object-fit: cover to object-fit: contain made the image to have gaps right and left to it so it appeared centered and not 100% width.

That said

The main problem you mention, about pages being too wide is caused from my failed attempt to cope with this problem in Drupal’s Olivero theme (you may want to only read the main post and the reply by Andy Blum containing images instead of reading the whole discussion).
Because my website is in a RTL language I can’t really use a different theme there because currently no Drupal theme besides Olivero supports RTL language websites.

[PaulOB]

@bendqh1

(you may want to only read the

That covers many of the same points I have mentioned which you didn’t quite grasp :). RTL or LTR doesn’t really have any bearing on the image width and as I have said a few times now you can’t just scale to 100% all the time as that makes no sense on large monitors.

You actually have all the tools you need to solve this in one way or another but it requires you to take control and apply them correctly. No one approach will work for everything as not everything is equal. It’s a ‘laws of the universe problem’ rather than a coding problem. A square peg will not fit in a round hole unless you shave off the corners.

[bendqh1]

Having all other Drupal themes supporting RTL might have given me a theme which is easier to work with.

Anyway, if I understand you correctly the main thing you say is that I need to limit the width of the main area of all webpages of my website in desktop displays.
There is actually a natural limitation which I have cancelled due to the UX problem described in the linked post in drupal.org but I am “pushed” to bring this limitation back.

[bendqh1]

Our beloved @PaulOB

I have removed all the CSS tweaks with which I have somewhat twisted the native page apperance of the Olivero Drupal theme, and now the webpage looks fine to me with the image in reasonable size in desktop display.

Please respect me by having a look.

[PaulOB]

es that looks much better for that image.

I would have centred the whole layout but that’s just my preference. The design seems to be left aligned by default so it may have to stay as it is.

[beredis802]

To address this without altering the core theme code, you can consider using CSS media queries specifically for desktop viewports to adjust the image size.