Its been a little while, but I am accustomed to an image, staying in its parent container, if you give it auto height and auto width, it should stay within the parent container? If I place any image into a container, I have to maunally set the pixel size of the image, or it overflows, does not even auto resize. When I scale the viewport down, the image still overflow in proportion to its actual size.

I can set a container, 400 wide, 100 px tall. insert an image and give it either a 100% width, or a maximum 100% width, and the image is taller, it spills out all over everything as through its background image. I can not dynamically increase the container size and have an image stay with init. in proportional size

and if I give the image a a max height, it just shows the top number of pixels. It seems there is something wrong, because I must calculate the image for its maximum width in order for it to stay in its parent container. so - I can no longer put an image in a container, and then style the container.

f I give it a 100% max height, the image explodes to the maximum width of the parent container instead

https://drive.google.com/open?id=1qKJBC0Y68Fyx8HzB1_vDW5Eiyi0M5oop
is a sample file.
container with a image link. Image is kept at max 100% height.
then a link to what the image actually is, 200x200, but maxes out th e width of the parent container and get cutoff by the container.
the 2nd container is just an image with a difference sized container. same thing.

what am I missing? For some reason I am dumbfounded. it shoul dbe working. Its as if, "object-fit" was left out of the framework in this update. if so - am I the only one to notice?

The 'Definition and Usage' section of this w3schools page does not seem to me to conflict with what is being experienced.

I'm wondering whether what is desired would be achieved in SD4 by giving the picture a width of 100%, a height of 100%, and an object-fit setting (Styles > Object > Fit) of Contain.

Frank

PS This was written before the third post above.

Bill, could it be that you are confusing inline images with background images? Since you are mentioning the top number of pixels, I mean?

You have the parent containers of those image links set to a fixed width and height.

I have the containing image set for example 300 wide, 100 px tall.

if I insert and image, and style the image to be 100% wide, 100% height (or as max), it has either the effect of complete distortion, or the image goes to the width of the parent container, and only the op parent container height is shown of the image. If I place the image into the container, and do not give any dimensions, the image is displayed to a width of the parent container (even made larger) and the whole image shows outside the parent container's height.

I prefer to use svg as images. And, this does not happen with svg's is seems.

I think the problem disappears if the 'object-fit' setting is made as in the second paragraph of my first post in this thread.

I attach an example.

Frank

THAT WORKS.
I was trying to use that, wondering if that was the deal, but it wasn't working in my configuration for some reason. Maybe it was late and I was getting exasperated and I missed something while I was trying to solve Stefke's issue.

so, when the hell did this start? I remember having this effect, but NOT having to set object stuff - as that sort of thing was only for backgrounds, and not even an option in older versions. Did grids or flex or frameworks change and I was just happening to not see or need this? So far, the only graphics I use that I like to expand with a container have been svg's or placeholder svg's, and they seem unaffected. (a 5kb svg is faster to load than about anything).

This change log suggests it may have been June 2017.

Details are right at the end of this page of the Guide.

Frank