Question

分辨率为1920x1080的

I have an image。该图像由图形团队创建，其上有大量文本/图形。我不确定是否有一种方法可以使用CSS和/或JavaScript / jQuery，当页面加载时，这个图像占用了100％的屏幕。然后，用户可以向下滚过它并查看页面内容的其余部分。

现在我正在尝试这样的事情（使用Bootstrap）：

<header>
    <img src="http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg" class="img-responsive" />
    <div id="event-callout">
        Ciudad de México Marzo 7th o Marzo 8th 2016
    </div>
</header>

效果不佳，因为当视口大小开始接近1770px时，图像开始垂直高于窗口的高度，因此导致图像中的某些文本滚动页面。

我想让图像在加载时符合屏幕大小（在加载时页面高度的100％）。我尝试过多个涉及jQuery和CSS的解决方案，但似乎都没有符合这些基本要求。它甚至可能吗？

编辑：此处的另一次尝试

#hero {
    background-image: url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg);
    background-size: cover;
    position: relative;
    height: 100vh;
}


<wrapper id="wrapper">
    <div id="hero"></div>
</wrapper>

此解决方案在缩小图像时不适合屏幕。

编辑2：jQuery尝试

#hero{
  background-image:url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg);
  background-size:cover;
  position:relative;
}

<wrapper id="wrapper">
    <div id="hero"></div>
</wrapper>

$(window).scroll(function (e) {
    handleScroll();
});

function fullscreen() {
    $('#hero').css({
        width: $(window).width(),
        height: $(window).height()
    });
}

fullscreen();

// Run the function in case of window resize
$(window).resize(function () {
    fullscreen();
});

产生与CSS版本相同的结果。

Answer 1

这对你有用吗？ ...并且通过添加底部填充，它保持其纵横比。

＆＃13;

html, body { margin: 0; }

#hero {
    background-image: url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 56.25%;    /* 1080 / 1920 = 0.5625 */
}

＆＃13;

<div id="hero"></div>
<div class="content">
 Bla bla<br>
 Bla bla<br>
 Bla bla<br>
 Bla bla<br>
 Bla bla<br>
 Bla bla<br>
 Bla bla<br>
</div>

＆＃13;

样本2

＆＃13;

html, body { margin: 0; }

.hero {
  height: 100vh;
}

.hero img {
  display: block;
  margin: 0 auto;
  max-height:100%;
  max-width: 100%;
}

＆＃13;

<div class="hero">
  <img src="http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg" />
</div>

＆＃13;

Answer 2

试试这个

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
       html,body{
        padding: 0;
        margin: 0;
        height: 100%;
       }
    img{
        height: 100%;
        width: 100%;
    }
</style>
</head>
<body>
<img src="http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg" alt="Hero">
<div>Other</div>
<div>Other</div>
<div>Other</div>
</body>
</html>

Answer 3

我想我已经解决了你的问题？ https://jsfiddle.net/Microsmsm/yuf56uv0/

＆＃13;

img {
  width:100%;
  height:auto;
}

＆＃13;

Answer 4

正如评论所指出的，对此的真正答案是，在屏幕尺寸发生变化时，保持图像的宽高比和可读性时无法做到这一点。

解决方案是不要拍摄包含所有文本/图形的巨大图像并尝试使用它，而是将其分解为组件，然后使用html / css将它们拼凑在一起。这样，他们可以随着屏幕尺寸的变化而移动/移动，同时仍然保持信息清晰。

适合/缩放图像，其图形/文本为100％宽度/高度

4 个答案: