[英]Image shrinks when resizing browser's height but not when resizing the width
[英]Image won't resize in height when it shrinks in width
我在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'
}
}
尝试注入一些JQuery:
window.onresize = function() {
$(".thumb").each(function() {
this.style.display = "none";
this.offsetWidth;
this.style.display= "block";
})
}
让我知道你的结果!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.