宽度缩小时图像不会调整高度

Question

I have an image in a div which can be of various resolutions. If I have a wider image with low height (ex. 730x90) it doesn't show properly on mobile. It shrinks in width but the height remains the same. Here's the code (I'm writing CSS in JS using React so that's valid code, the exact synthax isn't the problem here). child is a span which only contains a single img inside.

    parent: {
        '@media(max-width:744px)': {
            minWidth: '100vw',
        },
        '@media(max-height:823px)': {
            minHeight: 'auto',
        }
    },
    child: {
        '@media(max-width:744px)': {
            maxWidth: '80vw',
            maxHeight: '100vw',
            width: 'auto',
            height: 'auto',
            display: 'block',
            margin: 'auto'
        }
    }

Answer 1

Try injecting some JQuery:

 window.onresize = function() {
    $(".thumb").each(function() {
        this.style.display = "none";
        this.offsetWidth;
        this.style.display= "block";
    })
}

Let me know your results!