Develop Reference

How do I mitigate the 'zoomed in effect' of a hero image that covers 100%width of the webpage?

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;
}

How do i make part of a CSS background fit perfectly to a browser

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.

Responsive dynamic images with fixed height

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?

How can I make a background image of a site start off fitting to screen and then zoomable?

I have a really big image 4096 x 4096. I want to make it my background image for a site and when the site loads I'd like the full image displayed on any screen size, but I also want it to be zoomable.
Right now I've just made the image have height and width 100% in my CSS but obviously that keeps it at 100% no matter what. Any thoughts on how to achieve this?

I think what you might be looking for is using something like leaflet to allow you zoom in to an image.
This link here explains the process of breaking up the image into the required tiles.
Does that help?

Maybe you just need a property background-size: coverin background like below:
body {
background: url(xxx) no-repeat center center;
background-size: cover;
}

If I understand you question well, then, simply doing the following may be what you want :
body {
background: url(path-to/4096x4096.jpg) no-repeat;
background-size: 100%;
}
See the jsfiddle demo.

How to crop an image to fit the required height in the screen?

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