How to maintain an image's quality when resizing with CSS?

Hey Ron,

the tutorial can be found here:

Hopefully, this gives you an idea of what I am trying to accomplish. The terminal screenshots (should) disappear once they can no longer be shown at a width of 100%.

The GUI screenshots (of VirtualBox Manager) are still readable at a smaller width, so I left them in.

Does that help?

P.S. Please only put as much effort into this as is interesting for you. I consider the original image solved to my satisfaction and probably won’t make any more large changes unless the post gets some reasonable traffic.


@James_Hibbard, did you consider allowing the terminal screenshots to trigger a scrollbar?

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>auto scroll</title>
.scrollbox {
.scrollbox img {

<div class="scrollbox">
    <img src="" width="676" height="391">

1 Like

I did, Sir. But on reflection I thought it was easier to hide them, as although they are useful for the readers to orient themselves in the desktop version of things, they add little value to the mobile view of the site.


That exhausted my trove of display ideas, well… almost. IF you can change the bit mapped font size from 7x12px (or whatever the default font dimensions are) to something smaller such as 6x10, that would create a smaller display which would result in a smaller, crisp screen shot.

This has been a useful exercise for me. I had forgotten how very difficult it is to scale bit-mapped characters.

1 Like

That’s a nice idea Ron. In this case it’s not possible (AFAIK), as it is a generic installer with little option to configure anything. However, this could be something to bear in mind for times when I have more control over things.

Out of interest, are element queries supported in CSS yet? I had wanted to hide the image based on its display width, but took the easier route and used a much more generalized media query.

1 Like

The closest thing to what I think you’re asking is the JavaScript getComputedStyle()

Nah, I’d like a CSS solution.

There are a couple of polyfills available. For example:

Or you could go the PostCSS route:

but I just wondered what the current consensus was on when they would be ready to use natively.

1 Like

What about using something like this if it is just screenshots of terminal?

It is a cool tool that can record terminal for you and best bit users can copy paste from it.


That looks awesome. Thank you!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.