寬度縮小時圖像不會調整高度

Question

我在div有一個圖像，可以具有各種分辨率。 如果我的圖片較寬且高度較低（例如730x90），則無法在移動設備上正確顯示。 它的寬度縮小，但高度保持不變。 這是代碼（我使用React在JS中編寫CSS，所以這是有效的代碼，確切的synthax並不是這里的問題）。 child是一個span ，其中僅包含一個img 。

    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

嘗試注入一些JQuery：

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

讓我知道你的結果！