gpt4 book ai didi

html - 除了水平缩放之外,我可以垂直缩放 div 及其内容吗?

转载 作者:太空宇宙 更新时间:2023-11-03 22:54:50 27 4
gpt4 key购买 nike

我有以下结构;

<body>
<div id="splash">
<img /> <!-- 512x512 -->
<progress></progress>
<img /> <!-- 512x512 -->
</div>
</body>

还有这个CSS;

html, body {
height: 100%;
}

#splash {
max-height: 100%; /* does nothing */
}

#splash img {
max-width: 100%;
height: auto;
}

这会导致整个 div 滚动以适应浏览器窗口的宽度。目前,这还会缩放 div 的高度,将内容推到浏览器窗口的底部边界以下。

是否也可以垂直缩放 div,使其内容缩小,这样它的任何部分都不会低于浏览器窗口的底部边界?

fiddle

最佳答案

body { 
margin: 0; /* 1 */
}

#splash {
height: 100vh;
display: flex; /* 2 */
flex-direction: column; /* 2 */
}

#splash > img {
min-height: 0; /* 3 */
object-fit: contain; /* 4 (also try `cover` value) */
width: 100%;
}

progress {
width: 100%;
}
<div id="splash">
<img src="http://lorempixel.com/512/512/" />
<progress></progress>
<img src="http://lorempixel.com/512/512/" />
</div>

jsFiddle

注意事项:

  1. > Remove default margins on body element (这会导致滚动条)
  2. > Establish vertical flex container
  3. > Enable flex items to shrink past content size
  4. > Force images to respect aspect ratio (请注意,IE 和 Edge 尚不支持 object-fit。有关解决方法的选项,请参阅 here)。

关于html - 除了水平缩放之外,我可以垂直缩放 div 及其内容吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38820612/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com