I'm currently working of the mobile version of a website and I want all images to fill 90% of the screen width. I think the best technique to achieve this is creating a div for every image which is using the image as background-image. The problem is that I don't know how to match the height of the div with the aspect ratio of the image. I have tried to set width: 90% and height: auto but it didn't worked.
Could you please help me?
Lennart
You have an option in CSS called background-size with the option cover:
background-size: 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. The image is automatically centered unless over-ridden by another property such as background-position.
I don't know if I might be getting the question wrong, but I don't understand why you want to use background images?
If you use a regular img-Tag, the image will keep its aspect ratio if you set it to
width: 90%
height: auto
Other than that you can keep the aspect ratio of a div-container by setting a padding-top to a percentage on a wrapper-div. That works because the percentage is calculated dependend on the width of the div. See more here: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Related
How do I make an image always have the same crop height. As in on this site http://deliciousproductions.com.au/ the div is 420px high. But the image extends further.
Here's the div
<div class="dpsplash">
</div>
css
.dpsplash {
background-image: url('/img/banner1.png');
background-size: auto 800px;
height: 400px;
background-position: center top;
background-repeat: no-repeat;
}
So what this does is make the image height so that when you resize the page horizontally it doesn't shift the point where you crop the image for the div height, but instead extends the width. Buuuut we run into a problem because I have to guess the image height for a full width drawing on bigger resolutions where the image won't be shorter than 400px if displayed at full width, because if a 2500x1200 image is displayed at full width on a phone, it's gonna end before the div does, looking ugly.
I feel like in maths/javascript it should be that [(current page width)/(image width)] * (image height) = (the height it needs to be) or x, so the background-size style should be background-size: auto (that formula from above?);
I know basically no Javascript, it's so confusing but I understand logic arguments.
Yea, I'm not entirely sure what you're asking and your comment didn't particularly clear that up for me.
All I took out of this is that you want the image to look similar or the same on higher resolution screens? For one, if you want to test that you can zoom out on your browser to get an estimate on what it would look like on higher dpi screens. There's also a mobile emulator as part of Chrome's devtools that will simulate higher dpi's.
As to your question, if the question is how can you maintain the aspect ratio as well as keep the image at 100% the width past 1080p, a simple solution would be to add a media query that forces width 100% past a screen width of 1920 pixels. Which would look like width: 100%;. If that doesn't look exactly right to you, you could try setting the width past 100% at a value like 150% so it takes up a similar sized portion of the screen as earlier. If that is not your question and you want the image to scale with the dpi, experiment with the values vh and vw which will do just this. They stand for viewport height and width. You can also set the maximum width, height, vw, and vh with max-height/width and vmin/max
Do you mean background-size: cover;? What it does (source):
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
I am designing an HTML5 card game that will run as a mobile app, and need the #table div to scale to fill but not overflow the offsetParent div while maintaining the table's correct aspect ratio of 68%. This means that it should adjust its size to fill but not overflow either parent width and parent height so that it works in both portrait and landscape.
An example is how background-size: contain works when setting the background image. Only I'm not trying to set the background image, I'm trying to set the size of a child div. This way I can use percentage values for all subsequent elements on the table and have the game look exactly the same with exactly the same aspect ratio at all sizes.
Thanks!
UPDATE 1
Here is my code. See how the table is chopped off on the bottom for wide and short screen sizes:
http://vedanamedia.com/clients/intuitive-eye/speakeasy/
UPDATE 2
I am going for something just like this (jsfiddle.net/webtiki/dAebS) or this (dabblet.com/gist/2590942) except it also respects the shrinking height of the container.
You could try removing the default height, and adding padding bottom to create the correct aspect ratio and ensure it remains the same when re-sized.
I'm not completely sure I understand what you mean by 68% as you don't have a code pen setup, but I've added below an example for something which is an aspect ratio of 2:1 to see if this might be a possible fix for you.
div {
padding-bottom: 50%;
height: 0;
}
Visually I can appreciate the difference, but in which situations should I prefer one over the other?
Is there any point using them at all or can they be replaced by percentages?
Currently I don't seem to be able to go beyond a trial-error approach when using these properties, which does my head in.
Also I can only find pretty vague explanations and especially I find the W3C doc quite baffling.
Values have the following meanings:
‘contain’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the largest size such that both its width and its height
can fit inside the background positioning area.
‘cover’
Scale the image, while preserving its intrinsic aspect ratio (if any), to the
smallest size such that both its width and its height can completely
cover the background positioning area.
I'm probably being a bit thick, but can anyone give me a plain English explanation with relative examples?
Please use this fiddle. Thanks.
CSS
body{
width:500px;
height:500px;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-size:contain;
background-repeat:no-repeat;
}
Note
The accepted answer is the one I currently find the most concise and complete.
Thanks everybody for their help.
You can consider looking at the pseudocodes that govern the output. The values allotted to the image's size depend directly on the aspect ratios of container wrt aspect ratio of the background image.
Note: Aspect ratio = width / height
Contain
if (aspect ratio of container > aspect ratio of image)
image-height = container-height
image-width = aspect-ratio-preserved width
else
image-width = container width
image-height = aspect-ratio-preserved height
Cover
if (aspect ratio of container > aspect ratio of image)
image-width = container width
image-height = aspect-ratio-preserved height
else
image-height = container height
image-width = aspect-ratio-preserved width
You see the relation? In both cover and contain, aspect ratio is preserved. But the if - else conditions reverse in both the cases.
This is what makes cover to cover full page, without any white portion visible. When aspect ratio of container is greater, scaling image so that its width becomes equal to container width. Now, height will be greater, as aspect ratio is smaller. Thus it covers the whole page without any white portion.
Q. Can they be replaced by percentages?
No, not simply by percentages. You'll need conditioning.
Q. In which situations should I prefer one over the other?
When you are creating a website, you wouldn't want any white portion in the fixed background. So use cover.
contain on the other can be used when you are using a repeating background (e.g. when you have a pattern image with very high aspect ratio wrt veiwport/container you can use contain and set background-repeat to repeat-y). But a more appropriate use for contain would be for a fixed height/width element.
Although the question assumes the reader already understands how the contain and cover values for background-size work, here's a plain-English paraphrasing of what the spec says, which can serve as a quick primer:
background-size: contain ensures that the entire background image will fit the background area, keeping its original aspect ratio. If the background area is smaller than the image, the image will shrink so that it can fit the background area. If the background area is either taller or wider than the image, then any parts of the area not occupied by the main image will either be filled by repetitions of the image, or letterboxes/whitespace if background-repeat is set to no-repeat.
background-size: cover makes the background image as large as possible such that it will fill the entire background area leaving no gaps. The difference between cover and 100% 100% is that the aspect ratio of the image is preserved, so no unnatural stretching of the image occurs.
Note that neither of these two keyword values can be expressed using any combination of lengths, percentages, or auto keywords.
So when do you use one over the other? Personally, I think cover has more practical uses than contain, so I will go with that first.1
background-size: cover
One common use case of background-size: cover is in a full-screen layout where the background image is rich in detail, such as a photo, and you want to feature this image prominently, albeit as a background as opposed to the main content.
You want just enough of the image to be able to completely cover the browser viewport or screen, regardless of the aspect ratio of the viewport, or whether the image or the viewport is in portrait or landscape. You're not concerned if any parts of the image are cropped out as a result of this, as long as the image fills up the entire background area and maintains its original aspect ratio.
Here's an example of a layout where the content is housed in a semitransparent white background, which hovers over a full-screen background. When you increase the height of the preview pane, notice that the image automatically scales up to ensure that it still covers the entire preview area.
html {
height: 100%;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
width: 80%;
min-height: 100%;
background-color: rgba(255, 255, 255, 0.5);
margin: 5em auto;
padding: 1em;
}
If you use background-size: contain instead, what happens is that the background image shrinks in order for the entire image to fit in the preview pane. This leaves ugly white letterboxes around the image depending on the aspect ratio of the preview pane, which ruins the effect.
background-size: contain
So why would one use background-size: contain if it leaves ugly blank spaces around the image? One use case that immediately comes to mind is if the designer doesn't care about the blank spaces, so long as the entire image fits within the background area.
That may sound contrived, but consider that not every image looks bad with empty space around it. This is where the example of using a logo instead of a photo actually demonstrates this best, even though you probably won't find yourself using a logo as a background image.
A logo is typically an irregular shape sitting on either a blank or completely transparent background. This leaves a canvas that can be filled by a solid color or a different background. Using background-size: contain will ensure that the entire image fits the background without any parts of it being cropped out, but the image still looks right at home on the canvas.
But it doesn't necessarily have to apply to an irregularly-shaped image. It can apply to rectangular images as well. As long as you require that no cropping of the background image occurs, whitespace can either be seen as a reasonable tradeoff, or not a big deal at all. Remember fixed-width layouts? Think of background-size: contain as essentially that, but for background images and in both portrait and landscape orientations: if you can ensure that the content will always fit the boundaries of the background image at all times, then whitespace becomes a non-issue altogether.
Although background-size: contain will work whether or not the image is set to repeat, I can't think of any good use cases involving repeating backgrounds.
1 Note that if you're using a gradient as a background, both contain and cover have no effect because gradients do not have any intrinsic dimensions. In both cases, the gradient will stretch to cover the container, as though you had specified 100% 100%.
background-size:cover will cover the entire div with the image. This could be useful for showing thumbnail images of a main image where the entire image being displayed isn't that important, but you still want to conform to a size for all images. (for example, a blog post excerpt)
background-size:contain will show the entire image within the div. This can be useful if you specifically want to display the entirety of the images, but within a set container div size. (For example, a collection of company logos)
Both keep the image at the same aspect ratio
http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg
background-size:contain;
When using contain you may still see white-spacing, due to the way that it sizes and contains itself within the element.
background-size:cover;
will completely cover said element, you will not see any white-spacing
source:
http://www.css3.info/preview/background-size/
see example H
edit: use background-size:contain if:
You want it so that your image is always displayed in the viewport. Please note that: while you can see the full image, it will leave white spacing either on the top or bottom of the image whenever the aspect ratio of the browser and window are not the same.
use background-size:cover if:
You want a background-image, but you don't want the negative effect of the white-spacing which contain does have, please note that: when using background-size:cover; you may experience that it will cut off some of the image.
source: http://alistapart.com/article/supersize-that-background-please
Contain:- Scale the image to the largest size such that both its width and its height can fit inside the content area.
Exmaple:
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.
Example:
We had a huge conversation about cover vs contain just want to share this thoughts:
landscape image on landscape screen - best to use cover
portrait image on landscape screen - best to use contain
portrait image on landscape screen - best to use contain
portrait image on landscape screen - best to use contain
Illustration:
if(iDonPutSomeCode) const result = iCantPasteLinkToCodePen
https://codepen.io/Kinosura/pen/EGZbdy?editors=1100
I have to display a bunch of images in a page. Images are of different size, some very wide and some very thin. I want to put them all in a container of fixed width and fixed height.
The logic of placing the images should be like this:
Say if image is smaller than the container, scale it up to the maximum size such that the aspect ratio is maintained, and put it at the center of container.
If image is bigger, scale it down while maintaining the aspect ratio.
Some examples:
Say our container is 150x150, and we have an image sized 100x50. In this case the image should be scaled up to 150x75.
If we have an image sized 100x300, the image should be scaled down to 50x150.
While this can be easily done with javascript, I'd like to avoid that if possible.
I'm wondering if there's any way to accomplish this with CSS alone. I can live with a CSS3 only solution, or even with webkit/firefox specific directives, as long as it works on latest versions of Chrome, Firefox and Safari (I will use a fallback for IE if there's no choice).
Edit: I know about max-height and max-width of course. The issue is that if I set both max-height and max-width to 150, images won't be scaled up if needed.
Don't use an <img>. Instead, use a background-image style:
background: transparent url('path/to/image.png') no-repeat scroll center center;
background-size: contain;
The background-size does the magic, scaling the image up or down so that it snugly fits inside the container.
Check out this fiddle http://jsfiddle.net/demchak_alex/FazvX/3/
Though this only works if you can apply classes to individual images
EDIT:
if you can use background images, check out this fiddle http://jsfiddle.net/demchak_alex/FazvX/4/
The "image only with added classes" works on the top, and the using background images works on the bottom.
I want to load some photos from a server and display each of them in an own box such that the box is filled and the image centered (not stretched), if it is to big. Can I achieve this for example with CSS without knowing the size of each image? Maybe with max-width or so?
Here is an example of what I want:
You could use the CSS3 background-size property.
Specifically, you would use either background-size:contain or background-size:cover.
From the spec:
Values have the following meanings:
‘contain’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the largest size such that both its width and its height
can fit inside the background positioning area.
‘cover’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the smallest size such that both its width and its height
can completely cover the background positioning area.
Source: http://www.w3.org/TR/css3-background/#the-background-size
Which one you used would depend on the aspect ratio of the original images you are using.
Scroll down on this resource to see some examples: http://www.css3.info/preview/background-size/
The quickest thing that you can do is to put the image as a background image that is centered:
style="background: url(images/42.png) 50% 50% no-repeat"
Images smaller than the box will be centered in the box. Images that are larger will experience cropping.
The downside is, there is no scaling.
For scaling, you would have to know the dimensions, employ some math to calculate a scaling amount that will preserve the aspect ratio and use an actual element that is inside a cropping container that uses "overflow: hidden".
Here what you do. If for instance the image is inside a DIV with an ID called "boxer" You'll now create a CSS that will automatically re-size every image that's inside the DIV with the ID "boxer" The CSS will look like this
#boxer img {
Width: 600px
Height: 600px;
}
The above CSS will automatically re-size whatever image you put inside to the specifications in the CSS. This will fit the box with the ID "boxer" precisely if the dimensions corresponds to that of the CSS. You could just do 100% for both the width and the height, that way it fits the box.