I'm implementing a design that has full-width images with a fixed height (or the height only changes at certain breakpoints). I want the image to always fill its container while maintaining its aspect ratio.
If I implement this as a background image, it's simple enough to add background-size: cover:
.cover {
width: 100%;
height: 500px;
background-image: url(myimage.jpg);
background-size: cover;
background-position: center;
}
http://jsfiddle.net/h7542mys/
If you try resizing the browser window, you'll see that the image covers the entire area by essentially scaling the image up.
The issue is that I want to change the image source depending on the resolution, so that I don't have to serve gigantic assets to mobile devices. If I knew the image URLs at build time, I could use media queries for that, however, these are dynamic images that I only know the URLs for at runtime.
At runtime, I can generate image URLs for cropped and resized images, so ideally I'd want to do something like:
<div class="cover">
<img src="getImageUrl('image.jpg', 320, 500)" srcset="getImageUrl('image.jpg', 320, 500) 320w, getImageUrl('image.jpg', 640, 500) 640w, getImageUrl('image.jpg', 1000, 500) 1000w" sizes="100vw">
</div>
And then somehow get the image to fill the container just like the background image would. But if I give the image a height and width of 100%, it's obviously just going to stretch. Giving the image a min-width: 100% will set it to be as wide as its parent, but the height will be smaller.
The only way I've been able to get it to work is using object-fit: cover, but that has pretty bad browser support, and the polyfills I've found haven't worked with srcset: http://jsfiddle.net/Lctosbru/
Essentially, I'd like to get the same effect as background-size: cover or object-fit: cover. Is there a way to do this?
Related
When I'm creating a hero image section on my hobby site, which stretches 100%width of the viewport. Every image I upload has this zoomed in effect.Like you dont'see the whole picture just a portion of it.
I know I can use background-repeat, size and cover to play around with how I want the image to be presented. But is there a way for me to display the image without the browser cropping off a good portion of the image?
It seems like even when I resize the images it doesn't work either because the width is always 100% of the viewport.
Just curious if anyone has found a solution to countering the 'zoomed in' effect of an image taking 100% width of the viewport.
If you don't use the cover background property, at least try and set the height to 100%, as in here, and its fiddle.
body {
background-image:url("http://i.imgur.com/aZO5Kolb.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
That should stretch the all image within your viewport.
You can't control the height or aspect ratio of a user's viewport compared to the image size/ratio, so there will always be a possibility of cropping off from the width or the height when using background-size: cover.
In order to keep your aspect ratio for the image and cover the element with it, you can use background-position to the "focal point" of the image. For instance if the main part of the picture is at near the bottom right of the image, then you can set the background-position: 90% 90%. That way it the covering has to crop, it'll at least try to move the image so that the main subject is centered always in frame.
Here's an example:
body {
margin: 0;
height: 100vh;
width: 100vw;
background: url(http://placekitten.com/1000/700) no-repeat;
background-size: cover;
background-position: 50% 0;
}
I am new to CSS and so i dont really know how to describe it but here is an example:website
As you can see the background image at the top of the website fits perfect in height and width to the space of any browser regardless of the resolution. As you scroll down the page it keeps the same style where a specific background color fits closely to the space of the browser. I have tested this on a laptop as well as mobile and it fits closely each time. How do i achieve this? Is it doable purely from CSS or do i have to involve JavaScript/Jquery, etc? I have seen many websites use this specific style and i would like to understand hoe it is done.
I am not asking specifically for code, just an answer that states what it is i should be searching for. Code is appreciated however.
You can use your browser's developer tools to see exactly how that site creates the effect. It's a combination of CSS and JavaScript.
The CSS:
.homepage-intro.homepage {
background: url("//d1sva73gxwx496.cloudfront.net/images/homepage/bg-intro-2039a477.jpg") no-repeat;
background-size: cover;
}
The JavaScript then explicitly sets the height of the <div> to match the browser window.
There are different approaches. If you inspect the site you linked, they are using background cover to accomplish this. background-size: cover; It will fill up the width and height of the current div.
See this article for more info: https://css-tricks.com/perfect-full-page-background-image/
That site is using JavaScript to set the height of the <div> that has that background image. Combined with background-size: cover;, that should do it.
If you want to make sure the bottom of your div hits the bottom of the browser window, you can do this via CSS.
CSS
div {
height:100vh;
}
or
body, html {
height: 100%;
}
div {
height: 100%;
}
You will require CSS and jQuery to do this effectively (and also to allow for cross-browser support).
CSS
//Add this to your background image's CSS.
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: center;
height: 100%;
jQuery
var viewportHeight = jQuery(window).height();
//wrote an if statement to allow for a minimum height. You can remove this if statement if you don't need it.
if(viewportHeight>500){
jQuery('page-wrapper').height(viewportHeight);
}else{
jQuery('page-wrapper').height(500);
}
To solve this issue, you need to accomplish two tasks:
Make the background-image always adjust to the size of the container. This is done, as others have already stated, by assigning background-size: cover; to the container element on which you placed the image as a background-image. Add background-position: center; for better results on low resolution devices as well as portrait orientation.
Make sure the container element stretches 100% of the viewport's width in both directions. Block level elements per default grab 100% of the available width, but you need to set an explicit height to match the desired layout. This can be achieved by applying height: 100vh; (100% viewport height) to the container element. Check if the unit vh is usable on the devices you plan the layout for: http://caniuse.com/#search=vh
If you need to support browsers that do not recognize vh it's probably the easiest solution to use javascript (or jQuery) to dynamically assign a height to your container element.
This is how it's done in jQuery for a <div id="my-container-element"></div>
$("#my-container-element").height($(window).css("height");
Same in pure Javascript:
document.getElementById("my-container-element").style.height(window.innerHeight+"px");
Try the following in your CSS sheet:
html { background: url(myImage.jpg) no-repeat center center fixed; background-size: cover;}
It will fill the whole page with your background Image.
Site -> http://bit.ly/1ocSOjA
This is a truly complex question, I believe. I tried to find solutions, but nothing..
I'm creating a new application. The first section is an image that covers 100% of the browser height.
For this, I am using height: 100vh;
<section class="p-hero" id="hero">
</section>
.homepage .p-hero {
background: url("../img/capa/head-inverse2.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
height: 100vh;
}
However, when I move the browser sizes, the page breaks because the image always will cover the browser, but all the items inside this section will stay in the places where which one belong:
It is possible that the height of the section becomes pixels after the page loads? So that it always snaps to the browser size, but will not move if i resize the browser.
As I understand it, you want it so that when the page first loads, the image will be sized so it fills the full height of the browser. When the user resizes the browser afterwards, you want it to stay this size and not shrink or grow.
If so, this can be done with a simple jQuery function that is only called when the document is first loaded.
HTML
<img id="hero" src="http://placekitten.com/g/2000/3000">
jQuery
$(document).ready(function(){
$("#hero").css('height',$(window).height());
});
Live example: http://codepen.io/anon/pen/raVebQ
I have a large image whose height is bigger than the screen height. I have no problem with the width. I need to crop it so that the top 65% of the screen contains this image.
<body>
<img class="img" src="image.jpg" alt="img">
<p>Description</p>
</body>
If I write a CSS as below, the whole image gets compressed to fit in 65% screen. Moreover, if I resize the screen, the image automatically starts attempting to fit in the top 65%, making the whole screen look disturbed.
body, html { height:100% }
img.img { height:65% }
I want instead, the image to be cropped so that the leftover fits in the 65%, and then it stays that way. That is, if I now resize the window, let the vertical scrollbar appear. How can I achieve this?
(PS: I didn't want to give a fixed height because I want the webpage to be viewed in different devices like mobile phone and iPads too.
I think this is what I need:
Get the maximum height of the device (not the current height of the browser screen as the user might have minimized it for some reason)
Crop the image in such a way that it fits the top 65%, and display it
Keep the image size that way irrespective of the user changing the screen size
But I am not sure how to achieve it.)
Is this what you are seeking: http://jsfiddle.net/JjwMw/1/
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 65%;
width: 100%;
position: relative;
top: -22.75%; /* 65*35/100 */
background-image: url(http://placehold.it/1024x768);
background-size: cover;
background-position: center bottom;
}
Note that the image is now a background-image and is leveraging the background-size property which is not supported in IE8 (...who cares?). If the image cannot be a background image, you scale a div proportionally to fill the width using a padding hack (Proportionally scale a div with CSS based on max-width (similar to img scaling)) and have the inside image set to 100% width and height.
Maybe this can be useful to you:
http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/
Also a search for css cliping property here or in google should bring enough info
I have several images with very varying dimensions.
Some images may be as small as 50x100 and others as big as 4000x4000.
I want to show these images in their original size (never bigger), or scaled down to just fit inside the browser window.
Using the background image property I have gotten the images to always fit inside the browser, but I can't stop them from up-scaling if the browser is bigger than the image:
<div class="slide-pane" style="background-image: url(<insert url to image here>);"></div>
.slide-pane {
background-repeat: no-repeat;
background-size:auto;
position: absolute;
background-position: center;
background-repeat: no-repeat;
height: 80%;
width: 80%;
}
I have found these Javascript/Jquery solutions:
https://github.com/gutierrezalex/photo-resize
How to resize an image to fit in the browser window?
But I'm hoping there are some CSS only solutions.
max-height:100%;
max-width:100%;
height:auto;
Apply that to an img not an elements background image. Background images don't have full browser support for max width height. You could use background-size set to 100% 100% but I'd recommend using an img for better css control and accessibility.
If they’re content images (and not there for style) then you’re better off using an <img> element in the page. If you do that then you can give it img { max-width: 100%; } in your CSS. This has the added benefit of working in IE8 (unlike background-size).