gpt4 book ai didi

javascript - Internet Explorer 视口(viewport)宽度单位错误与 img 标签

转载 作者:行者123 更新时间:2023-11-28 07:27:29 26 4
gpt4 key购买 nike

所以我制作了一个页面介绍,其中有 svg 文件,其中一个是彩色图形,另一个是仅概述。该图有一个隐藏的溢出,它有一个动画来增加它的宽度。像这样:

<div>
<figure> <img /> </figure> <-- Overflow hidden>
<img /> <-- Only borders
</div>

它在除 IE 之外的所有浏览器上看起来都不错我一直在调整所有容器的宽度,但我无法使其适合并响应。有什么想法吗?

( jsFiddle )

$(window).ready(function() {
$('figure').animate({
width: "100vw",
}, 3000, function() {});
});
body {
background-color: red;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
}
html {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
#loading {
height: 100%;
width: 50vw;
}
#loading figure {
position: absolute;
overflow: hidden;
width: 0vw;
margin: 0;
padding: 0;
height: 100%;
}
#loading img {
width: 50vw;
position: absolute;
top: 0;
}
#loading h4 {
text-align: center;
color: #fff;
font-size: 3em;
font-weight: 300;
position: absolute;
top: 25vh;
width: 50vw;
z-index: 2;
}
<body>
<div id="loading">
<figure>
<img src="http://imgh.us/test-color.svg">
</figure>
<img src="http://imgh.us/test_68.svg">
</div>
</body>

最佳答案

在#loading img 上添加 100% 高度

#loading img { 高度:100%; ...

关于javascript - Internet Explorer 视口(viewport)宽度单位错误与 img 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31736015/

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