OK - working through site issues and have my sliders working now (former problem), but…
The images in the slider are sized much larger than they really are. I looked through all the classes that I could find and I don’t see anything that would make such a thing happen. I see nothing in the JS to affect it either.
The images are in a section called “Quoted by” which is the second slider on the page. The images are colored placeholders. The section starts on line 503 of the HTML.
I still don’t get why the max-width: 100%; is not affecting things now. Because of display:block?
Using the same principal as max-width was doing before the change, is it possible to use max-height: 100%; to force an image to fill the max height of a div? What I’m getting at is another section of the page where there’s an image left and text right in a div. An image of course is fixed height but the text varies a little in each browser/OS. The idea is to stretch the image a few pixels to adjust to the length of rendered text so that the tops and bottoms all align evenly.
In the case of width:100%; … It changes the images actual intrinsic width. When using % with the width property, the parent element’s width is what determines the child’s % width. Which can result in stretching.
In the case of max-width:100%;… It cannot override the images intrinsic width. But it will allow it to scale down and maintain it’s aspect ratio when the parent container becomes smaller than the images actual width.
That’s only possible if the div has a fixed height and then that would be the same as setting the pixel height of the image anyway. If the div has a percentage height then all the parents of that div would need a chain of heights in percentage going right back to root (html and body). (You would use height anyway and not max-height as max-height only comes into play when the height of the image exceeds the height of the container. The width of the image would then need to be set to auto to maintain aspect ratio.)
The easy way to do what you want would be to use a background image instead and then it will always be stretched by the text.
Thanks Paul. Interesting idea about the background image. The layout is vertical image left, text column right. I can make a background image to look like that for a text overlay, but what happens when the responsive layout adjusts for phone or tablet?
Yes you can use the object-fit property to manage the look of the image if using custom length and width for the image but you still have the same problem in that you can’t find the height of the parent in order to stretch the image to 100% height.
There are tricks with percentages/cells/flexbox etc but they are a bit convoluted and don’t work as well as the background image in my demo above.
I’m not quite sure what you are asking but the demo of mine is pretty similar to your layout with picture on the left and text on the right controlling the height. Obviously for smaller screens you would throw in a media query and have the the image on top and the text underneath. I’ve updated the demo above to add the media query.