0

所以我做了一个页面介绍，其中有 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>

4

1 回答 1

0

在#loading img 上添加 100% 高度

#loading img { 高度：100%; ... }

于 2015-07-31T00:21:25.803 回答