How do I prevent Doks / bootstrap img-fluid from stretching an image horizontally to fit the content area?

[mhite]

I am attempting to upgrade from .5 to 1.0. Default handling of images has appeared to change, so I'm trying to figure out how to fix this.

Specifically, I had been using ![]() to drop images into my pages. Things would automatically shrink if necessary, but never stretch, to fit the viewing area.

So with 1.0, instead of using the markdown form, I've been attempting to use {{< image >}} {{< img >}} shortcode and apply img-fluid class. This works great to "shrink" an image but it also expands an image, which I don't want. I hope this make sense, but is there an img-fluid that only shrinks (without changing aspect ratio) and does not attempt to expand?

I tried to put this in my assets/scss/common/_custom.scss file:

img.img-fluid {
  width: auto;
  max-width: 100%;
  height: auto;
}

But that didn't seem to do anything to change the behavior.

Sorry for the naive question, mostly just trying muddle through the impactful stuff moving from .5 to 1.0 and I'm a bit out of my depth.

[h-enk]

Please do not use the image shortcode (it's deprecated), but the img shortcode.

Does using the process parameter help you?. See this example: https://images.thulite.io/docs/shortcodes/img/#examples

BTW, this is what the img-fluid class does:

.img-fluid {
    max-width: 100%;
    height: auto;
}

[mhite]

Please do not use the image shortcode (it's deprecated), but the img shortcode.

Ah, sorry, that was a typo on my part. I've been using the img shortcode.

Does using the process parameter help you?. See this example: https://images.thulite.io/docs/shortcodes/img/#examples

Ah, yes, I can see how that would be useful.

I am wondering if there is some approach that leaves the image at its native resolution unless it is too large for the viewable area, in which case it can scale down like img-fluid provides?

[h-enk]

I am wondering if there is some approach that leaves the image at its native resolution unless it is too large for the viewable area, in which case it can scale down like img-fluid provides?

Not exactly sure what you mean. I'd say leave out the process parameter then (and use img-fluid, or not)

See: https://images.thulite.io/docs/basics/markdown/#page-resource

[mhite]

Another thing I'm trying to figure out is an elegant way to potentially click an image to view it "in full". I have screenshots where areas are hard to see unless you look at it full screen/larger.

IE.

You can see an image annotation that I want to call attention to that might be hard to see if you can't click into it to expand the viewable image area.

I guess I could just create a link to open it directly, although it seem like getting it to open in a new tab/window is complicated with goldmark.

[h-enk]

You could use a lightbox integration like for example Spotlight (by the maker of FlexSearch, powering Doks) . See for instance my implementation here: https://store.thulite.io/anna/

[mhite]

You could use a lightbox integration like for example Spotlight (by the maker of FlexSearch, powering Doks) . See for instance my implementation here: https://store.thulite.io/anna/

Oh, this looks pretty nice! Thank you for the pointer.