How do I get an image to fill the full screen (note there is stuff below it - think of it as a header in a page that fills the whole screen) but maintains its aspect ratio, either overspilling on the width or oversplilling on the height.
I thought it would be:
<img class="w3-image" src="./images/img1.jpg" style="min-width:100vw; max-height:100vh; background-position: center; background-repeat: no-repeat;" />
But that does not work. The aspect ratio fails.
Insert it as a background to an element instead, with background-size: cover; and the element with height: 100vh.
Basically you may use
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
min-width: 100vh;
http://codepen.io/powaznypowazny/pen/apeVXg
Hope it helps :)
Related
I have a css background image that i displayed as cover so that it covers entire screen but it does not show lower part of the image.
used this image: https://pixabay.com/vectors/winter-landscape-houses-background-2840549/
unable to see the lower part of the white houses in the screen.
using chrome browser.
CSS Code:
banner{
width: 100%;
height: 100vh;
background-image: url(./images/winter.png);
background-size: cover;
background-repeat:
position: relative;
text-align: center;
background-attachment: fixed;
}
any help appreciated.
edit:
html code
<div class="banner" >
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
body{
background-image: url(https://cdn.pixabay.com/photo/2017/10/11/10/05/winter-2840549_960_720.png);
/* Center and scale the image nicely */
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
Try changing background-size: cover; to background-size: contain; and then background-size: 100% 100%; to fit 100% width.
body {
background-image: url(https://cdn.pixabay.com/photo/2017/10/11/10/05/winter-2840549_960_720.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-attachment: fixed;
background-size: 100% 100%;
}
The problem you are having that the height of your image is bigger than the hight of the container (body element) at certain point depeding on the current viewport height, which causes your image to be cropped.
You can try the background-size: contain where the image will scale and try to fit the container keeping the aspect ratio undisturbed. Here you gurantee that your image will not be cropped, but you need to consider changing the image for each device screen size (responsive design image).
There are many ways to solve this issue, but you need to find the one that fits your design, or to find the image that fits your container.
Check this w3schools article about responsive design image
I'm dealing with a background image.
Is there a way I can maintain the aspect ratio of my image even after using background-size: cover;? My image fits perfectly to screen but at the same time - it's a little smushed. I've tried height: auto; or any other value for height but it looks like background-size: cover; doesn't allow height to be manipulated.
Is there a way to manipulate height? In other words, stretch the background image vertically without smushing the image?
As you can see by the snippet, background-size: cover already maintains aspect ratio.
.bg-me{
background-image: url('https://assets.atlasobscura.com/media/W1siZiIsInVwbG9hZHMvcGxhY2VfaW1hZ2VzLzA0MzRjZGI4MTJlNjdkMzBmNV93aW5kb3dzX3hwX2JsaXNzLXdpZGUuanBnIl0sWyJwIiwidGh1bWIiLCJ4MzkwPiJdLFsicCIsImNvbnZlcnQiLCItcXVhbGl0eSA4MSAtYXV0by1vcmllbnQiXV0/windows_xp_bliss-wide.jpg');
background-size: cover;
height: 200px;
width: 200px;
border: 10px solid red;
}
<div class="bg-me"> </div>
I had to set 4 pages with 100% width and height background depending of the screen size.
The imgs have got the same width and height and these are my settings,
.fullImg{
width: 100%;
height: auto;
max-height: 100vh;
max-width: 100vw;
}
this is working perfectly for few pictures but not with others, how is that possible if the pictures got the same dimensions?
I tried to do background-size: cover which is working for a while but then it will cut off the img so the best way so far is that one i wrote above.
I am talking about big screen sizes from 1440px to 2560px.
Thanks a lot
You can have a look at the headers here: http://provaresponsive.herokuapp.com/pr.html
As mentioned in the comments if you want an image to always use all available height and width, then you have to decide: Do you want the image to retain it's aspect ratio - then it has to be cropped, or do you want the image to change aspect ratio, in which case it will stretch.
Here is an example for each option:
No Stretching - Will Crop
html {
background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
jsfiddle
Stretching - No Cropping
div {
background-image:url(http://www.olejarz.com/arted/perspective/images/intro.gif);
/*
* Width & Height can be percetages only when the parent
* element has explicitly declared dimensions.
*/
height:200px;
width:500px;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
jsfiddle
And there is a third option, you probably won't like, which is to contain the image, so:
No Stretching, No Cropping - not filling the x/y
html {
background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
jsfiddle
use backstretch js .it can fix your issue.if you call your background image using backstretch js then it will automatically adjust your image according to your screen ,whatever your image resolution is
Here's the original image (2880 x 900):
And here's how it appears on the rendered page (1280 x 500):
1280 x 500 is the dimension of the <div> that contains the image as its background. If you notice, the rendered background is getting cropped instead of shrinking to fit inside the div which is smaller than the original image. My understanding is that a background-size: cover is meant to scale the image up or down without cropping. Why is it not working?
HTML
<div class="page-header-div">
<div class="page-header-div-image-blog" style="background: url(<?php echo $bannerurl ?>) no-repeat;"></div>
<div class="downarrow text-center downarrow1" onclick="scrollPage(this);"><i class="fa fa-chevron-down"></i></div>
</div>
CSS
.page-header-div { position: relative; }
.page-header-div-image-blog {
background-size: cover;
height: 100%;
}
The exact same markup on another page works just fine! The two pages have the exact same tags used for the snippet. Is there no way to fix this issue through CSS? If so, how can one go about doing it using JS (I would really want to avoid that if at all possible).
You have to use background-size: contain; instead and also set background-repeat to no-repeat.
From MDN background-size docs:
cover: A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
contain: A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
Also note that, as #zgood pointed:
2880 x 900 is a different aspect ratio than your div at 1280 x 500, so event when you use contain you will have a gap
div {
width: 1280px;
height: 500px;
background-image: url(http://i.stack.imgur.com/rf8Wg.jpg);
background-size: contain;
background-repeat: no-repeat;
}
<div></div>
See also:
Scaling background images (MDN)
I was having this same problem. It turns out that I had my background-size declared before my background. See example:
DID NOT WORK:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url(../img/background.jpg) center center no-repeat;
WORKS:
background: url(../img/background.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
div {
width: 1280px;
height: 500px;
background-image: url(http://i.stack.imgur.com/rf8Wg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div></div>
I have a div with background-image set to data:image/jpeg;base64 format:
<div style="background-image: url(data:image/jpeg;base64,/9j/4AAQ...
I would like to show full image respecting aspect ratio, using available space. I would normally use:
width: 90vw;
height: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
In this case image is stretched using full div size. Any suggestions?
Update:
Div with data:
http://jsfiddle.net/witepo/bksmhtwc/
Update 2:
expected result: http://1drv.ms/1uTj8Nd
Div: http://codepen.io/anon/pen/LEZPjj
try this
background-size: cover;
background-repeat: no-repeat;
background-position: center center;