适合/缩放具有图形/文字的图像至100％宽度/高度

Question

我有一个分辨率为1920x1080 的图像。 该图像是由图形团队创建的，并且上面有很多文本/图形。 我不确定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

这对您有用吗？ ...并通过添加底部填充来保持其纵横比。

 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 */ }

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

样品2

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

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

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/

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

Answer 4

正如评论所指出的那样，对此的真正答案是，当屏幕尺寸改变时，在保持图像的纵横比和可读性的同时，无法做到这一点。

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

适合/缩放具有图形/文字的图像至100％宽度/高度

问题描述

4 个解决方案

解决方案1
0 2016-02-15 20:00:36

解决方案2
0 2016-02-15 20:06:10

解决方案3
0 2016-02-15 20:54:20

解决方案4
0 2016-02-16 14:42:31

适合/缩放具有图形/文字的图像至100％宽度/高度

问题描述

4 个解决方案

解决方案1 0 2016-02-15 20:00:36

解决方案2 0 2016-02-15 20:06:10

解决方案3 0 2016-02-15 20:54:20

解决方案4 0 2016-02-16 14:42:31

解决方案1
0 2016-02-15 20:00:36

解决方案2
0 2016-02-15 20:06:10

解决方案3
0 2016-02-15 20:54:20

解决方案4
0 2016-02-16 14:42:31