1

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.

noobcoderiam
  • 488
  • 4
  • 19
  • 2
    Code please , a working example will be helpful – Dev Man May 25 '19 at 19:52
  • 1
    Possible duplicate of [CSS background image to fit width, height should auto-scale in proportion](https://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion) – Heretic Monkey May 25 '19 at 19:57

2 Answers2

2

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.

VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
  • VonC you da man sir. I had been using background-size all wrong. Was using it to position the image in the container or to cover it. This is great because I change image size depending on viewport to make a resolution work. thanks a lot! – noobcoderiam May 25 '19 at 19:59
  • @noobcoderiam You are welcome: you can edit this answer to illustrate how you associate the size and viewport. – VonC May 25 '19 at 20:00
1

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;
}
Scrimothy
  • 2,536
  • 14
  • 23
  • this is waht I was doing previously with background position. it works well. I think my solution might end up being a photoshop one, where I learn to center images better or resize them – noobcoderiam May 25 '19 at 20:08
  • @noobcoderiam, if you already have photoshop, that can at least help you determine the exact % or px from the top left that you want to center. You can just put that into your `background-position` property. – Scrimothy May 25 '19 at 20:15
  • 1
    another excellent point. I actually just did that. Thanks for your help. I appreciate it a lot dude. – noobcoderiam May 25 '19 at 20:26