Maintaining Aspect Ratio with 100% Width & Height (Cropping Overflow in CSS) - javascript

I'm working on full-screen background slideshow.
My question is: How can I set an image to take up the full screen and maintain aspect ratio?
Min-height and min-width work, but do not keep the aspect ratio when both are set. I want the image cropped with the full coverage of the container.
Diagram of Problem
I believe I need to have one dimension fixed, and the other to auto; given that the image dimensions and view-port dimensions are variable, I'm thinking I would need at least 2 sets of CSS rules, and javascript to calculate which one should be used. Is there a simpler way to do this?
I've drawn up a diagram illustrating my problem. The dark colors are the original images. The median colors are the desired effect. The lighter colors are the desired overflow from the scaled up image.
I'm working on a Ken-Burns effect full-screen background. I know I have to worry about transitions, but I'm hoping that I can handle that after.
Tutorial for Ken Burns Effect:
http://cssmojo.com/ken-burns-effect/
Solved: Thanks Maju for introducing me to background cover. Changing the images to divs and changing the javascript + css on the Ken Burns code from images to divs worked well. The script changes the element class, so you have to use Maju's CSS another way or change the script.

If you will use images in css background-image, you can set on any element background-size. And if I understand you right, you need something like:
.background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-repeat: no-repeat !important;
background-position: 0 0 !important;
background-attachment: fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
<div class="background" style="background-image: url(http://www.jurosko.cz/images/stackoverflow.png)"></div>
Cover will affect image in the way that it will always cover the whole element with right aspect ratio.
There is also new css style, but it doesn't work in IE/ME.
https://css-tricks.com/almanac/properties/o/object-fit/
For this reason I recommend to use divs with background-image.

Related

centering image overlaying another with xray effect

The issue I’m having here is with the x-ray image behind the one in the front. They do not line up. It only does when i stretch the browser out to 1920px. Anything smaller than that causes it to misalign. Note that I purposely set the image to be at 100% width which I know is not responsive.
I want to keep the effect of the image getting cut off on the right and left of the browser. Ideally I'd like both images to be centered and aligned when I decrease the size of the browser.
Here is the Github link:
https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06
If you added a fiddle that would have been a lot easier but all you need to do is add background-size:cover to #flesh css rule
html, body, #flesh {
position: relative;
margin: 0;
height: auto;
max-width: 100%;
background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
background-position: center;
background-size:cover;
}
this way your background image will fit in container and will match with the original image.
Here is a working fiddle https://jsfiddle.net/w2jjaLn5/

How to add background-size in css based on image size?

I am working on a project where the user will be able to select or upload an image and it will be displayed inside of these circles. The images are dynamically being added as background-images. The problem comes in when I am trying to set the background-size. If the image is larger than the circles, I would like it to have a background-size cover, so it scales down. If the image is smaller than the circle, I don't want it to scale up or anything so setting no background size achieves this effect.
Any ideas on how I could achieve this?
The main html looks like this:
<div class="image-boundary">
<div class="content">
<div class="image-boundary-photo img-responsive" style="background-image: url('https://www.fillmurray.com/g/100/100');" alt="">
</div>
/div>
</div>
css:
.module-list-home .content .image-boundary-photo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
background-repeat: no-repeat;
background-position: center;
}
Here is the codepen of my example. http://codepen.io/johnsonjpj/pen/zKyGZp?editors=1100
The third image should have a background-size: cover; because it is bigger while the others should stay the way they are.
You might get some mileage out of the background-size setting "contain".
I've added it inline to your pen, for a view, here: http://codepen.io/cam5/pen/vXvNOq?editors=1100
It upsizes when they are too small, so might not be entirely what you're after. But querying image's size is very likely going to involve some javascript. This is a CSS-only approach.
<div class="image-boundary-photo img-responsive"
style="background-image: url('https://www.fillmurray.com/g/100/100');
background-size: contain;" alt="It's Bill Murray.">
</div>
From MDN:
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.
Have you tried setting the property background-size: contain; in the .module-list-home .content .image-boundary-photo class?
To solve the problem of small images also getting too large using background-size: contain; use the size as in percentage. e.g.
set the property background-size:60%; in the .module-list-home .content .image-boundary-photo class instead of contain and i think your problem will be solved.
Hope this helps.
[Edit]
Also wrote solution with jquery dynamically checking image size and adjusting.
Here is the jquery solution: http://codepen.io/Nasir_T/pen/ZpVbJo . Make sure your page has the jquery.min linked.
Try this
$('.img-responsive').each(function(key, el) {
var img = new Image;
img.src = $(el).css('background-image').match(/^url\("?(.+?)"?\)$/)[1];
if ($(el).width() <= img.width || $(el).height() <= img.height)
$(el).css('background-size', 'cover');
})
here is a working example

Very weird behavior when working with background size CSS3

I recently learned about the background-size property thanks to this topic
Set size on background image with CSS?
As you can guess, I am trying to make a background image take up the full screen and no more/no less. Here is my fiddle
https://jsfiddle.net/1x7ytdaa/
document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')";
document.body.style.backgroundSize = "contain";
Here is what the contain property does
Scale the image to the largest size such that both its width and its height can fit inside the content area
It shouldn't matter what size the image is. If it's smaller, it should be scaled to the full size of the screen. If it's larger, it should be scaled down.
In the fiddle, you can see that the image is repeated 5 times horizontally and 5 1/2 times vertically.
I've tried 100% 100% and while the width stretches the full screen, it still shows the same image 5 1/2 times vertically
I can not explain this behavior. Does anyone have any ideas?
Two things:
background-repeat
width and height of body
As you can in an edited fiddle, the problem is that the default value of background-repeat is repeat. Therefore, the image will be repeated rather than stretched. That doesn't solve everything, though, as the body and HTML elements should have a width defined that is 100%.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')";
document.body.style.backgroundSize = "contain";
document.body.style.backgroundRepeat = "no-repeat";
If you want to cover the whole screen, use cover instead of contain. Cover makes sure that the element is completely covered, whereas contain simply makes sure that the background image is maximally contained (which can cause white space).
This might help:
position: fixed;
background-position: center;
overflow-x: hidden;
width: 100%;
height: 100%;
background: url(img/xxx.jpg);
background-size: 100%;
background-attachment: fixed;
overflow-y: scroll;

Making some kind of see-through glass image in css/html/js

When viewing this website: http://myankle.co.uk/faq/
Whenever you scroll down or up, the image of the ankle changes. I know that you can make a div opaque and put an image behind it, but how is this effect being done? The image seems to move with the page.
This is achieved by setting a background as background-attachment: fixed. The effect is a basic implementation of parallax.
A good article to get you started is http://davidwalsh.name/parallax
An example class to apply this would be:
.parallax {
background-image: url('http://demoimage.com/image.jpg');
background-color: none !important;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; // For mobile this should be scroll to fix bugs with ios
overflow-y: hidden;
}
You add a background-image to body that is position: fixed; and then make html content on top of it transparent, so you can see the background-image. It's not moving with the page, that is an illusion.
That element uses a background-attachment CSS property to fix the image relative to the screen:
If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
elem {
background-attachment: fixed;
}
JSFiddle demo.

Scaling div size with background image whilst keeping aspect ratio

Come a bit unstuck here.
I've got a div thats approx. 2000px wide by 800px tall.
Inside that div I have another div, with a background image.
I want the internal div, to take 80% height of the parent container, and for the width to keep proportion with the height, so the background image doesn't distort, if this makes sense?
Im using CSS3 to scale the background image 100% both x and y.
.internal-box {
background:url(images/elevator.png) repeat scroll 0 0 transparent;
background-size:100% 100%;
height: 80%;
width: auto;
}
http://jsfiddle.net/JbmE6/
Try this:
background-size: contain;
background-repeat: no-repeat;
However note that this might not be fully supported in all browsers such as IE8.
Also note that this doesn't make the <div> itself any smaller, it only makes the background image appear in only the relevant portion. If you put a border on .small you will see in fact it is 100% width of its container.

Categories