Fit/Scale image that has graphics/text on it to 100% width/height
Question
I have an image that is 1920x1080 in resolution. The image was created by a graphics team, and has a lot of text/graphics on it. I'm not sure if there is a way with CSS and/or JavaScript/jQuery that when the page loads, this image is taking up 100% of the screen at load. The user can then scroll down past it and view the rest of the page's content.
Right now I am trying something like this (using 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>
It's not working out too well, because as the viewport size starts to approach 1770px, the image starts being vertically taller than the height of the window, therefore causing some of the text within the image to scroll off the page.
I'd like to just have the image fit to the screen size on load (at 100% of the page's height on load). I've tried multiple solutions involving jQuery, and CSS, but none seem to fit these basic requirements. Is it even possible?
Edit: Another attempt here
#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>
This solution doesn't fit the image to the screen as it scales down.
Edit 2: jQuery attempt here
#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();
});
Yields the same results as the CSS version it seems.
4 answers
solution1
0 2016-02-15 20:00:36
Does this work for you? ... and by adding a bottom padding it keeps its aspect ratio.
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>
Sample 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>
solution2
0 2016-02-15 20:06:10
Try this
<!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>
solution3
0 2016-02-15 20:54:20
I think I have solved you the problem ? https://jsfiddle.net/Microsmsm/yuf56uv0/
img { width:100%; height:auto; }
solution4
0 2016-02-16 14:42:31
The real answer to this, as the comments have indicated, is that there is no way to do this while maintaining the aspect ratio and readability of the image as the screen size changes.
The solution is to not take a huge image with all of the text/graphics on it and try to use it, and instead to break it up into components, and piece them together on the page using html/css accordingly. That way they can move/shift around as the screen size changes, while still keeping the message clear.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.