CSS – responsive height for images within posts

Thanks for choosing Tracks!

This should be the default behavior with images in the post. When you insert an image in a post, make sure to use the “full size” version of the image, so it will be large enough on wide screens.

It will automatically scale down and stay within the content area on phones and smaller screens.

Hello,

Sorry – yes the WIDTH is automatically the full width of the blog area, but the HEIGHT is not controlled. That’s what I want to control precisely because when a portrait oriented image is full size, you can only see the top half and then you have to scroll down. Therefore, you don’t see the image all at once. So ideally, you’d want the HEIGHT of the image to be responsive to the screen size, regardless of the blog area (because there’s no fixed height).

See: https://www.rcmcreative.co.uk

I hope this makes better sense.. ?

Thanks!

R

Got it, this is a bit tricky since we can’t base the images’ height precisely on the screen height. However, we can create a set of size limitations roughly based on the screen height.

For instance, check out this CSS:

@media all and (max-height: 500px) {

  .entry-content .aligncenter,
  .entry-content .alignleft,
  .entry-content .alignnone,
  .entry-content .alignright {
    max-height: 400px;
  }
}
@media all and (max-height: 700px) {

  .entry-content .aligncenter,
  .entry-content .alignleft,
  .entry-content .alignnone,
  .entry-content .alignright {
    max-height: 500px;
  }
}

That will make images in the posts have a maximum height of 400px for all screens (hypothetically) 0-500px tall. If the screen is 550px tall, the next part will take affect which says to give the images a maximum height of 500px if the screen is under 700px tall.

It’s a bit messy, but you can add a few of these CSS statements to get decent control over the image height.

Hello,

Thanks ??

That’s the kind of CSS I was after… unfortunately it doesn’t seem to have worked?

https://rcmcreative.co.uk/posters/the-politics-kitchen/

:(.

R xx

This is hanging around somewhere in my CSS:

@media all and (min-width: 56.25em) {
  .two-column-images .overlay {
  background: rgba(255,255,255,0.9) !important;
  }
}

I wonder if the ‘(min-width:56.25em)’ is interfering because it says ‘important’.

Okay lets try changing how the media queries work. I just realized the way they’re written now, they won’t put any height limit if the screen is over 700px tall which isn’t what we want.

Please try using this CSS instead:

.entry-content .aligncenter,
  .entry-content .alignleft,
  .entry-content .alignnone,
  .entry-content .alignright {
    max-height: 400px;
  }
@media all and (min-height: 700px) {

  .entry-content .aligncenter,
  .entry-content .alignleft,
  .entry-content .alignnone,
  .entry-content .alignright {
    max-height: 600px;
  }
}
@media all and (min-height: 900px) {

  .entry-content .aligncenter,
  .entry-content .alignleft,
  .entry-content .alignnone,
  .entry-content .alignright {
    max-height: 800px;
  }
}

Now the image heights will still scale with the screen height, but if the screen is 900px or any taller, it still limits the images to being 800px tall.

Hmm…

It doesn’t work either. The height adjusts but the aspect ratio changes because the width doesn’t respond to the height change and you end up with a stretched image.

I took a screen shot but I can’t paste it here ??

R

Alright let’s give it another shot with this CSS:

.entry-content .aligncenter,
  .entry-content .alignleft,
  .entry-content .alignnone,
  .entry-content .alignright {
    max-height: 400px;
    width: auto !important;
  }
@media all and (min-height: 700px) {

  .entry-content .aligncenter,
  .entry-content .alignleft,
  .entry-content .alignnone,
  .entry-content .alignright {
    max-height: 600px;
  }
}
@media all and (min-height: 900px) {

  .entry-content .aligncenter,
  .entry-content .alignleft,
  .entry-content .alignnone,
  .entry-content .alignright {
    max-height: 800px;
  }
}

I thought the widths would update automatically, but here we’re forcing them to “auto” which means they should adapt to the new height on their own.

Did you ever get this working?