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?
Shouldn’t that be max-width?
max-width: 500px will make the image small and will cause large empty space aside it.
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.
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.
How do website designers do that?