I have an image分辨率为 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>
效果不是很好，因为随着视口(viewport)大小开始接近 1770 像素，图像开始垂直高于窗口高度，因此导致图像中的一些文本滚出页面。
我只想让图像在加载时适合屏幕大小(加载时页面高度的 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 版本相同的结果。
最佳答案
试试这个
<!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>
关于javascript - 将带有图形/文本的图像调整/缩放到 100% 宽度/高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35417796/