0

I want to show images on my website with the following logic:

  • If the image fits within the maximum size of the container (240 pixels tall, 100% width), just show it as-is
  • Otherwise show it using the object-fit: cover style

So for huge images, they would be constrained to 240 pixels tall, and the full width of the container. But small images wouldn't be blown up, they would show with their actual size. A 50x50 pixels image would show as 50x50 pixels.

I hope all that makes sense so far.

So the basic idea would be this:

<style>
  .image img {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
  }
</style>

<div class="image">
  <img src="https://via.placeholder.com/150">   
</div>

<div class="image">
  <img src="https://via.placeholder.com/500">   
</div>

The problem with this approach is that while large images are indeed constrained to be 240 pixels tall, small images are now stretched and also 240 pixels tall:

enter image description here

I have a demo here, where you can play with the code: https://svelte.dev/repl/1edc77418be748269860fb3dfb866b20?version=3.53.1.

The problem is that I am showing remote images (the img src could be anything), so I don't know the size beforehand. If I knew the size I could apply the classes/styles conditionally but that's not going to be possible unless I add more JS into the mix (which I might end up doing unless there is a CSS-only way).

Kevin Renskers
  • 5,156
  • 4
  • 47
  • 95
  • Just to clarify - if the image's width is less than the container's width but the height is larger than the container's height what should happen? – A Haworth Nov 12 '22 at 22:29
  • Good question. I guess it should shrink down to fit the height. So a picture that is 480 pixels tall and only 200 pixels wide would show as 240 x 100. Because blowing up a picture looks horrible. So I think the rule is that the width is the driving force, and the height is a maximum, but not really the deciding factor. But yea quickly getting more complicated – Kevin Renskers Nov 12 '22 at 22:36
  • That would still be stretching it width wise. Can we just say the picture must not stretch? But if it’s too big in both directions then it will do whatever cover would do, or in that case should it do whatever contain would do so in all cases the whole picture would show? – A Haworth Nov 13 '22 at 06:13

1 Answers1

0

Alrighty, I got something that works, it results in images that look the best in most situations:

https://svelte.dev/repl/4a8b62eefddb47da91ecdd6ec1bec3ab?version=3.53.1

But it kinda sucks that it needs JavaScript to measure the image, especially in a SvelteKit project which uses SSR: the image initially shows up in its original size, until the onMount / onload logic kicks in and the resizing happens. But if I set the max-height and max-size before the code runs, then the clientWidth and clientHeight are already affected. Or the displayed portion of the image changes from the top to the middle part for example. All in all a really bad experience.

So unless this can be done in pure CSS, I think I am giving up on this idea.

Kevin Renskers
  • 5,156
  • 4
  • 47
  • 95