Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Scott Moore
Scott Moore
4,050 Points

Need help with image resizing

http://codepen.io/freightguy/pen/gbRvjb

Ok so here's what I'm trying to accomplish. This first pen shows no image whatsoever. As you can see there is no height set.

http://codepen.io/freightguy/pen/rawJrJ

This second one is with a height of 50rem. But when you scale it the div scales accordingly to the height I have set, except the gap between pictures.

How do you get the images to scale with the div, while the div inheriting the image height? I am completely lost on this one. I saw clearfix hacks but not sure how to use it correctly or even if that is the right approach.

Any thoughts. Thanks, this one is driving me nuts. BTW I have tried cover, contain. When i use contain it shrinks the image to like 25px x 25px. Weird.

Hopefully I explained this properly.

Dragisa Dragisic
Dragisa Dragisic
8,391 Points

background-size: 100% 100%; background-origin: content-box;

7 Answers

Dragisa Dragisic
Dragisa Dragisic
8,391 Points 
div{
  max-width:100%;
  height:50rem;
  border:1px solid red;
  background-size: 100% 100%; 
  background-origin: content-box;  
}

.one{
    background-image:url("http://fc05.deviantart.net/fs71/f/2011/343/0/6/pagani_zonda_r_by_dangeruss-d4imwmm.jpg");
     background-repeat:no-repeat;
}

.two{
    background-image:url("http://hdwallpapers360.com/wp-content/uploads/black-pagani-zonda-hd-wallpapers.jpg");
    background-repeat: no-repeat;
}
Scott Moore
Scott Moore
4,050 Points
Scott Moore
Scott Moore
4,050 Points

Thank You, unfortunately that was not correct. I still get the huge space between pictures when resizing.

Dragisa Dragisic
Dragisa Dragisic
8,391 Points
Dragisa Dragisic
Dragisa Dragisic
8,391 Points 
div{
  max-width:100%;
  height:50rem;
  border:1px solid red;
  background-size: 100% 100%; 
  background-origin: content-box;  
}
Scott Moore
Scott Moore
4,050 Points
Scott Moore
Scott Moore
4,050 Points

Drag,

That's what I did. When I re-size the browser though I still see the white-space between pictures. If you see what I am seeing, the image is re-sizing correctly, but the div height is still not inheriting the images values. It's staying relative to the browser window it seems like. I guess my next question would be this. Is this a recommended way of this?

http://codepen.io/freightguy/pen/rawJrJ

Scott Moore
Scott Moore
4,050 Points
Scott Moore
Scott Moore
4,050 Points

That was it! Now a dumb question. How do you scale the image vertically to keep its dimensions proportional with the width? the image is skewed now. Lots to learn I guess thanks for your time.

Dragisa Dragisic
Dragisa Dragisic
8,391 Points
Dragisa Dragisic
Dragisa Dragisic
8,391 Points 
div{
  max-width: 100%;
  height: 50rem;
  border: 1px solid red;
  background-size: cover; 
  background-origin: content-box;
}

.one{
    background-image:url("http://fc05.deviantart.net/fs71/f/2011/343/0/6/pagani_zonda_r_by_dangeruss-d4imwmm.jpg");
     background-repeat:no-repeat;
}

.two{
    background-image:url("http://hdwallpapers360.com/wp-content/uploads/black-pagani-zonda-hd-wallpapers.jpg");
    background-repeat: no-repeat;
}

@media screen and (max-width: 1000px) {
    body {
        background-color: orange;
    }
    div{
        background-size: cover;
        margin: 0 auto;
        max-width: 100%;
        height: 476px;
    }
}
@media screen and (max-width: 500px) {
    body {
        background-color: blue;
    }
    div{
        background-size: cover;
        margin: 0 auto;
        max-width: 100%;
        height: 255px;
    }
}
@media screen and (max-width: 380px) {
    body {
        background-color: green;
    }
    div{
        background-size: cover;
        margin: 0 auto;
        max-width: 100%;
        height: 191px;
    }
}
Scott Moore
Scott Moore
4,050 Points
Scott Moore
Scott Moore
4,050 Points

10-4, I'm getting ready to start learning those @media queries. Thx for all the help!!