So let me sum it up: you’d like the image height to always stay the same, but when the canvas shrinks, the width of the image shrinks too, resulting in the image being cropped?
If so, I think this is the CSS snippet you need:
height:50px; /*set the height of the image*/
object-fit: cover; /*this ensures the image occupies the entirety of the height specified above */
object-position: 100% 0; /*this defines from where the image will be cropped as it shrinks*/
max-width:100%; /*you define the maximum value for the width. If the image is placed in a container that has a relative position, the image will not exceed its width */
flex:none; /*useful in case the image is in a container that has a display:flex; property */
I think the issue was that you set the
width of the image — preventing it from shrinking altogether. As long as you set the
height of an image, its
width should be calculated automatically so that the image keeps its original aspect ratio. So no need to specify it.