I have a container div of unknown size*. I want to fill it with an image of unknown size such that the image completely fills the div, maintaining the aspect ratio.
Then I want to center the image so that the cropped parts are at the edges.
I also need a way to ensure that the container's padding doesn't show any of the image.
*If it helps, the container's size isn't really unknown. It's a Bootstrap column so I can compute the width if I need to.
Solution
These styles did the trick:
background: url(...) no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
This can be easily achieved using a background image. After you've specified it as you'd like, just add the following CSS to your container to make the background certainly cover its container, while keeping the aspect ratio:
CSS code
.container {
background-size: cover;
}
This will not take maximum size into consideration, and will stretch the image beyond its native resolution, resulting in potential blurring.
Related
I'm trying to find out ways to keep images, type and other graphic elements that fill a browser window to maintain their proportion and relationships to one another while continuing to fill the window while that window is resized.
To see what I mean, please take a look at the following examples:
Example 1:
https://www.nytimes.com/2017/09/26/magazine/how-fake-news-turned-a-small-town-upside-down.html?rref=collection%2Fsectioncollection%2Fmagazine&action=click&contentCollection=magazine®ion=stream&module=stream_unit&version=latest&contentPlacement=1&pgtype=sectionfront
Example 2:
https://www.nytimes.com/2017/09/28/magazine/here-comes-the-closer-in-the-seventh-inning.html?rref=collection%2Fsectioncollection%2Fmagazine&action=click&contentCollection=magazine®ion=rank&module=package&version=highlights&contentPlacement=6&pgtype=sectionfront
Note how the photo in each, especially in Example 1, is not stretched or squeezed out of its natural shape. Also note how either the full width or the full height of the image is always shown no matter what size the browser window is. Further, the type (headline and intro copy) remains anchored to the bottom left and remains the same size.
How can I achieve this effect?
Additionally, I would like to know how to set the page up so that large image and the graphics that accompany it, change every few seconds.
I would prefer to do this is CSS, but also welcome HTML and other solutions.
Thanks.
I think you are looking for background-size: contain;
In contrast to background-size: cover; it does not ensure the background image covers the whole container, instead the background image gets resized so that the height AND the width are the same or smaller than the size of the container.
Example for contain:
textarea {
width: 100px;
height: 100px;
background-image: url('http://via.placeholder.com/100x100');
background-size: contain;
background-repeat: no-repeat;
}
<textarea></textarea>
Example for cover:
textarea {
width: 100px;
height: 100px;
background-image: url('http://via.placeholder.com/100x100');
background-size: cover;
background-repeat: no-repeat;
}
<textarea></textarea>
Sidenote: I intentionally used textareas for the examples, because they can easily be resized in the bottom right corner for testing
You will have to give width in % for this kind of effect. Don't specify the height and width for the image in pixels. You will have to use '%' for varying the image width ( with proportionate height ) with the screen size or browser size.
If you wish to provide height and width in pixels then you will have to use media queries in CSS to specify height and width for varying screen sizes.
i have a problem with an image in my website it does not appear properly in browsers the picture cuts certain areas in mobile browser
this are the images
desktop pc screen image
image on a mobile browser
this is the code for the image
section#landing {
width: 100%;
height: 100vh;
background: url('../../img/bg.jpg');
background-size: cover;
background-position: center;
background-attachment: scroll;
}
#media only screen and (max-device-width: 320px) {
}
Step 1: Look up the code you are using to see what it is supposed to do:
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.
Well, it is clipping the image, and you don't want it to clip the image, so clearly cover is wrong.
Step 2: Look at the other options:
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.
That might do the job.
<percentage>
A value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. Negative percentages are not allowed.
… or that (with 100% 100%), depending on what you actually want:
see here jsfiddle
do not use cover because that makes the image to be cropped
instead use contain also add background-position:top center because with contain the img resizes and the empty spaces ( top and bottom ) are filled with the background-color which in your case is transparent . so it's better to align the bck img to top and fill the bottom area with whatever you want
you can with media query set the background-size:cover on pc and contain on mobile
code :
section#landing {
width: 100%;
height: 100vh;
background: url('http://i.stack.imgur.com/fXmkE.jpg');
background-size: contain;
background-repeat:no-repeat;
background-position: top center;
background-attachment: scroll;
}
I have got so far on the background of my new website and now i am stuck, the background image goes less than 100% height if you shrink the browser window.
I want it to stay full size and if you shrink it, I don't want the height to go any less than 100% (showing white)
Code here http://www.bestlincs.co.uk/new/
you can use below code:
html or .classname {
background: url(ImageUrlhere) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use:
body {margin: 0; padding: 0}
and set the background-size property to cover: http://www.w3schools.com/cssref/css3_pr_background-size.asp
In your code you have not defined a height to the image give it a height 100% and it works i tried it in my browser and works fine
The solution depends on your needs - one way would be to specify a min-width and min-height attributes in css instead of pure width. As it will scale to whatever size it needs, then position it fixed to the top left corner (mind you, any "overflow" on the right will be cut off).
Source:
http://css-tricks.com/perfect-full-page-background-image/
A detailed explanation of your problem:
If you set an image to 100% width of its container and do not specify a height, it will always be stretched until it fills out the container, while the height is scaled to keep the image's aspect ratio.
E.g: Take an image that is 200px x 100px large, put it into a 300px wide container with it's width set to 100%. It will be scaled by a factor of 300/200 = 1.5 along both dimension, resulting in an image sized: 300px x 150px.
What will happen, if your image has a different aspect ratio than the user's screen? It will simply stretch to full width, then leave the rest blank. Setting a height as well would introduce even more problems, as your image would get distorted.
HTML:
body {
margin:0;
background: url(image.gif) no-repeat;
padding: 0;
}
Then the background size will be 100%
When i set the background-size property from an image of a div to background-size: cover; or background-size: 100%;, the both look the same.
What is the difference?
When should i use cover and when 100%?
cover = Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off unlike 100% where all of the image will be visible.
If it did not do the zoom in, you would end up with two sides that reach the edge but on the other axis you would have blank horizontal (or vertical) looking 'bars' on either side of the image in one of those directions.
Your Question: Why would they looks the same ?
Answer: If the image / container are square
See http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover for example
here's a fiddle: http://jsfiddle.net/RS5kX/19/
background-size:100%; = background-size:100% auto; = the width is set to be 100% large and the height of the background image follows respecting the image aspect ratio.
background-size:cover; means the background image will always fit the whole div , you won't be left with any empty spots in your div
background-size:100% 100%
won't leave any empty space too, but of course this will detroy the original image aspect ratio
Pretty sure background-size: cover; means the image will fill the element while maintaining its aspect ratio, while background-size: 100%; will just make the image fill 100% width of the element.
I've searched for hours upon hours and now I figure it's time for me to ask the question. I can't get my background image that is placed in my header to fit to screen. It works for every kind of computer resolution fine, but where I run into trouble is when I am viewing on a phone, it doesn't want to shrink. I've done min-height, max-height, I've tried everything, the problem partly I think is that the header div itself is smaller than this image, but I also don't really know and need some guidance, i'm relatively new to the CSS scene.
Here is what I have:
#header {
background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 209px;
}
Website url is http://hamsoc.polymath.io
Thank you for your help in advance!
Duncan Beattie gave me the answer and it worked like a charm. Here is what he said:
"You have background-size: cover which is fitting the height of the
background image to the fixed height of your div, 209px. remove the
fixed height and replace with padding-bottom:15% this will kep the
aspect ratio of the div the same and scale the image as viewport gets
smaller."
You have background-size: cover which is fitting the height of the background image to the fixed height of your div, 209px.
remove the fixed height and replace with padding-bottom:15% this will kep the aspect ratio of the div the same and scale the image as viewport gets smaller.
I would suggest having the header image in your HTML rather than a background image and then setting a max-width like so:
#header img{
max-width: 100%;
height: auto;
}
This will also allow you to make the image "clickable" which is generally wanted in a header logo.
DEMO FIDDLE
FULLSCREEN
Have you used the a precentage to set the height of the image in the div?
So set the image height to be say 100% of the div?
If not then maybe you could use some javascript code to detect whether they are on a mobile device, and set the height of it accordingly?
The hard coded height value is messing you up. Try playing with the height: 290px value and watch the header fit properly on smaller screens.
Instead of a background image, you can try putting the image in the html and using a CSS property to help the content scale down on smaller screens.
img {
max-width: 100%;
}