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";
    })
}

让我知道您的结果！

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

1 个答案: