gpt4 book ai didi

html - 图像最大宽度给出没有滚动高度的滚动条

转载 作者:行者123 更新时间:2023-11-28 19:24:31 25 4
gpt4 key购买 nike

我需要一个最大宽度为容器 100% 并保持宽高比的图像。当我这样做时,当窗口达到特定宽度时,我会得到一个没有滚动条的滚动条(禁用滚动条)。

当调整图像的宽度(因为最大宽度)并且高度刚好适合时,将窗口的高度降低 2 个像素。让我给你一个视频,因为它很难解释: https://dump.video/i/4otCA8.mp4

从这点来说:- Chrome 提供了一个启用的滚动条。现在将高度调整为大 1 个像素时,滚动条将被禁用。重新加载后:禁用滚动条。- Firefox 立即禁用滚动条,即使在重新加载后也是如此。

这会给动画和东西带来非常烦人的闪烁。

试过:- overflow-x 隐藏在容器/主体上- 许多其他调整

需要:- 类形式必须是灵活的

设置固定高度可以修复它,但会产生不需要的结果:没有自动调整大小的图像和损坏的纵横比

最小示例:

<html>
<head>
<style>
* {
padding:0;
margin:0;
box-sizing:border-box;
}

img {
display:block;
max-width:100%;
}

.container {
width:40%;
min-height:100vh;
background:#ccc;
}
</style>
</head>
<body>
<div class="container">
<img src="http://formbuilder.local.nl/api/Formbuilder.Tests.color?&color=blue&" />
</div>
</body>
</html>

所以我的问题是:如何在图像上使用 width:100% 而不在容器或图像字段上使用固定高度来摆脱滚动条。

最佳答案

你可以使用高度:

img {
display: block;
max-width: 100%;
height: 100%;

关于html - 图像最大宽度给出没有滚动高度的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56563268/

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