注意:我最近问了一个非常相似的问题,但被否决了,因为我使用了一个外部 URL 作为 JS fiddle
我有以下代码:
HTML:
<div id="homepage-banner-contents">
<div>
<img src="http://s.hswstatic.com/gif/whiskers-sam.jpg" alt="logo" id="banner-logo"/>
</div>
</div>
CSS:
html, body {
height: 100%;
}
#homepage-banner-contents {
height: calc(100% - 60px);
background: red;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
#banner-logo {
max-height: 320px;
}
#banner-logo {
max-height: 320px;
max-width: 100%;
}
https://jsfiddle.net/anik786/9vd83rww/
目标
我的目标是让图像保持在红色背景的中心,并在浏览器的高度变得太小时缩小图像。
实际发生了什么
虽然上面的代码对于正常的屏幕尺寸是没问题的;当浏览器高度降低太多时,图像似乎根本没有缩小,而是坚持保持相同的大小,导致溢出。
最佳答案
这是您要找的吗? https://jsfiddle.net/9vd83rww/2/
#banner-logo {
height: calc(100vh - 80px);
max-width: 100%;
}
关于html - flexbox 中的图像不会在浏览器调整大小时调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32362238/