Hi all,
I've got an #HTML or possibly a #CSS question. On my website, I have a lot of links to sites with their accompanying favicon in the link. As these images are all different sizes, (I hotlink whenever I can,) to get them to fit in line with the text, I've been using hard modifiers.
height="18" width="auto"
Which looms fine on my computer. But on my phone, the images are much smaller than the text.
Is there a way to specify that an image's height is the same as rendered text?
Not via JavaScript or newer languages if possible. I'm trying to keep my site as Web 1.0 as possible.
Thanks!
The site : https://tourma.great-site.net/me.html
@Tourma In straight HTML, no. With CSS, you can give them em-based heights, something like:
a[href] img {
height: 0.8em;
width: auto;
}
Or if they all have a common class, use that class in the selector instead of the link-image pattern I used above.
(I recommend not hotlinking, though. Grab copies and keep them on your site; that way, you’re not hitting their bandwidth and you have the image as long as your site is up, even if theirs isn’t.)