The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Tumblr: max image height as percentage; browser inconsistencies

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #45142


    If you view the below post in safari or chrome, the image will fit inside the window, no matter the screen resolution. If you view it in Firefox or IE, the image will not fit inside the window.

    Here’s the post (I use it as an example because it’s a very big image and illustrates the problem. The problem occurs with many images on the blog, depending on the size/resolution of your screen):

    The way I achieved the desired result (which only occurs in chrome and safari) was by adding the below to the theme’s custom css field:

    .post img {max-height: 80%;}

    My goal is for all images to fit entirely inside the screens of all devices, on all browsers, and fill about 80% of the heights of all screens (without distorting aspect ratios). This seems desirable for an artist site. My other, main site does what I describe on all browsers, but it uses a javascript plugin, which I don’t have here (I don’t know how the plugin works: I only installed it, with difficulty).

    In searching around, I’ve seen where other people have this question. The answers proposed seem to involve creating a new div, setting its size, and making images fill it 100%. Or something along those lines.

    That may be a bit beyond me, and I’m not certain the problems I’ve seen addressed in forums are exactly the same as my problem. Any thoughts on how this can work in IE and Firefox? Thanks.


Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.