0

I'm making a blog system where users can add images via some markup/WYSIWYG editor. Users will be able to set:

  • image URL (possibly a remove URL from another server)
  • desired image height on for large screens in pixels

Consider the standard "responsive image CSS" which might be generated as the output of that system had users not set a desired image height:

index.html

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>
<div>Before</div>
<img id="img1" src="hole.svg">
<img id="img2" src="hole2.svg">
<div>After</div>
</body>
</html>

and consider these sample images just for reference, they could be anything else:

hole.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256">
    <rect x="0" y="0" width="100%" height="100%" fill="black" />
    <path d="M32 32v188h188v-188zM64 64h128v128h-128z" fill="red" />
</svg>

hole2.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="600">
    <rect x="0" y="0" width="100%" height="100%" fill="black" />
    <path d="M32 32v188h188v-188zM64 64h128v128h-128z" fill="blue" />
</svg>

With that, the img1 will be 256x256 when the screen is wider than 256 px, and scaled down proportionally when the screen is narrower than 256, keeping aspect ratio. And similarly, img2 will be 500x500 and scale down on smaller aspect ratio. This is all fine if the user didn't specify their desired height.

Now, suppose that the user of the system would like to set:

  • img1 to be 800 in height
  • img2 to be 1200 in height

while still scaling them down proportionally if the screen becomes narrower than each image.

What HTML/CSS should the system generate to achieve that without having to download the images and measuring their width/height to calculate aspect ratio?

The only solutions that I can see involve me downloading the images, and measuring their width/height.

For example, tacoshy in the comments suggests setting:

img {
  width: 100%;
}
#img1 {
  max-width: 800px;
}

but I don't want to do that because it requires me to download the image and inspect its width and height to decide that the aspect ratio is 1, and then calculate the 800 as:

max-width = desired_height * (image_width/image_height) = 800 * (256/256)

I'm looking for something that can be based solely on the desired image height of 800px, without inspecting the image itself.

If the desired height were smaller than the natural image size, e.g. 200px, I would be able to achieve it with:

img {
  max-width: 100%;
  height: auto;
}
#img1 {
  max-height: 200px;
}

The problem is when I want to make the image larger however, as the max-height can't make the image be larger than 256x256 as I want.

Another way to say what I want to do is to change the natural image size. The problem is that I need height: auto to scale on small screens, so I can't also height: 800px as I would like as the attribute is already taken up.

Another failed attempt is:

  width: 100%;
  height: 800px;
  object-fit: contain;
  object-position: left center;

The problem with this is that the amount of space taken up by the image is always 800px, so in a narrow screen there is vertical blank space between before and after and the scaled down image.

Ciro Santilli OurBigBook.com
  • 347,512
  • 102
  • 1,199
  • 985
  • `width: 100%; max-width: 800px;` should solve the issue. That way it will always fit the container up to a size of 800px; where the last rule applies. – tacoshy Nov 14 '21 at 15:14
  • @tacoshy thanks, but is there a solution that does not involve inspecting image width/height aspect ratio for each image? – Ciro Santilli OurBigBook.com Nov 14 '21 at 15:16
  • what do you mean? if you apply it to the `img`-selector it applies to all images. by default an image will maintain its aspect ratio. – tacoshy Nov 14 '21 at 15:17
  • @tacoshy e.g. if I had a 500x300 image, and I wanted to set height = 600, then I/my code would to calculate `max-width: 1000` with your solution, and so on for every new image. – Ciro Santilli OurBigBook.com Nov 14 '21 at 15:19
  • I really ont get what you mean. the height of every image is calculated by default depending on its width independetly. why do you want to set a preset height at the same time? – tacoshy Nov 14 '21 at 15:22
  • Are you saying that if an image has a natural width of a certain amount then you want it to not go beyond (another) certain amount in width and that there can be a lot of these different settings? Is there any formula which we can use to find out what the max width for a particular width of image is or is it something that will have to be held in a table and looked up? – A Haworth Nov 14 '21 at 15:36
  • @AHaworth what I basically want to do is set my own custom natural height. Image width should never go beyond the viewport width, and aspect ratio should always be maintained. So there is no specific max width that is to be attained (besides current viewport size) – Ciro Santilli OurBigBook.com Nov 14 '21 at 15:44
  • This might help: https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio – aerial Nov 14 '21 at 15:44
  • @aerial301 thanks, I saw that one, but I could not find any answer that does what I wanted. The key problem there is that none of the solutions there allow making the image larger than its natural size. – Ciro Santilli OurBigBook.com Nov 14 '21 at 15:58
  • @tacoshy sorry for having edited while you were answering. I think I understood why things were not very clear previously, hopefully it will all be clearer now, I hadn't isolated things well enough. Thanks for the attempts! – Ciro Santilli OurBigBook.com Nov 14 '21 at 16:15
  • @AHaworth I edited the question based on the comments to try and make things clearer, hopefully it will be more understandable now. – Ciro Santilli OurBigBook.com Nov 14 '21 at 16:16

1 Answers1

0

You can use vw units for both height and width in CSS. That way, both the width and the height will scale proportinally to the width of the screen.

.class {
   width: 100vw;
   height: 45vw;
}
noiseymur
  • 761
  • 2
  • 15