I’m now getting a problem with the images in Step Five. Originally I used max-width:xx% and max-height:xxxpx, and this worked. Then it stopped working. I have now tried combinations of max-width and height, width and max-height, and max-width and max-height.
The one that seems to work on preview is max-width and height and looks completely correct:
Not a direct answer to your problem, particularly as I don’t need to grid format my images and just have a single column layout, so implementation is simpler - in order to avoid aspect ratio issues on my image embeds, I need to only define the width, and strip out all the height tags before posting (embedding from Flickr).
the preview space is probably wider than the actual post space. if you’re going to use height, you probably just need a smaller height to make it work.
Pisum, yes there is that, but the max-width is relative and a percentage, so it should resize to the width of the screen. Or am I smoking my socks ;-)
I have got it to look right on my laptop screen at 150px. When I resize the browser window it squashes the photos :-(
I need a relative size solution. Though perhaps this is too advanced for iNat’s journal formatting options and I should just remove that section from my post.
I’ve just noticed something on the pics I included above: the preview is honouring the relative width (you’ll see the first pic is shorter widthways than the other 2), but the published post is not and is making all the pics width 33% willy-nilly.
that sort of dynamic sizing – fill width at a specific height – is hard with just HTML when you have images that are different sizes. you probably need javascript to do that sort of sizing in a completely dynamic way.
as i noted before, your squashing is happening because your height is too big for your max width, which is complicated because it’s a percentage of a variable width. to get a better result, you can try using a larger max with of, say, 40%, and then using an appropriate height like 13.5vw. vw is going to be a better bet than px for getting something that is more dynamic.
I would use an easy work-around: make a collage out of the three photos with a picture editing program and then include just this one picture in your post. (But that’s probably not what you wanted).
Aha! So, instead of using max-width, I have used width:vmax - this seems to work!!! I kept the height as a pixel value. Thank you so much, @pisum ! As always You rock!
But what I’m trying to do with this particular journal post is show people how to add images to their posts if they have no html or graphics experience. This allows them to link to images in their posts without too much hassle.
just to clarify, your browser will ignore this syntax because vmax is just a unit, and you haven’t specified how many units you want. in other words, using this syntax is no better than just excluding it altogether.
in the new version of your journal article, what i notice is that all your images there are 140px tall (150px - 2x5px padding), and the width is just whatever it needs to be to scale with the original aspect ratio. there’s nothing wrong with that per se. however, i believe you were trying to get all the images on one row, and the new version of the page pushes the last image to a second row.
Hm. This is true. I am trying to have a day away from the computer, which is why I’m not concentrating on that stuff properly. So I will revisit this tomorrow…
You rock!