Question

所以我做了一个页面介绍，其中有svg文件，其中一个是彩色图形，另一个是仅仅是轮廓。该图有一个隐藏的溢出，它有一个动画来增加它的宽度。像这样：

program.py

除IE之外，所有浏览器看起来都不错而且我一直在玩所有容器的宽度，但我无法使其适应并使其响应。有什么想法吗？

（jsFiddle）

＆＃13;

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

＆＃13;

$(window).ready(function() {
  $('figure').animate({
    width: "100vw",
  }, 3000, function() {});
});

＆＃13;

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;
}

＆＃13;

Answer 1

在#loading img

上添加100％的高度

#loading img { 身高：100％; ... }

Internet Explorer使用img标记视口宽度单位错误

1 个答案: