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

HTML & CSS
21

Hey Ron,

the tutorial can be found here: https://hibbard.eu/install-ubuntu-virtual-box/

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.

2 Likes
22

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>auto scroll</title>
    <style>
.scrollbox {
    overflow-x:auto;
}
.scrollbox img {
    display:block;
}
    </style>
</head>
<body>

<div class="scrollbox">
    <img src="https://res.cloudinary.com/hibbard/image/upload/v1536145368/ubuntu-virtualbox/ubuntu-install-1.png" width="676" height="391">
</div>

</body>
</html>
1 Like
23

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.

2 Likes
24

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
25

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
26

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

27

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
28

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

https://asciinema.org

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

5 Likes
29

That looks awesome. Thank you!

31

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