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 Joshua Inman
Joshua Inman
2,280 Points

Sizing images to fit in a two column layout?

Hello everyone!

I'm currently trying to configure my two images to fit evenly along with the rest of my webpage. I achieved the design I am looking for, although it isn't fluid at all and I also think I'm making it more complicated than it needs to be. Would love to hear some feed back, thanks.

HTML:

        <div class="secondary-content">
            <div class="container-food-1">
                <h2>Chicken Wings</h2>
                <img src="img/food-1.jpg" alt="" class="img-food-1">
            </div>

            <div class="container-food-2">
                <h2>Cheeseburger</h2>
                <img src="img/food-2.jpg" alt="" class="img-food-2">
            </div>
        </div>

CSS:

/* Secondary Content */

.secondary-content {
    overflow: auto;
}

.container-food-1 {
    width: 25%;
    margin-left: 23%;
    float: left;
    background-color: #f3f3f3;
}

.container-food-2 {
    width: 25%;
    margin-right: 23%;
    float: right;
    background-color: #f3f3f3;
}

.img-food-1 {
    width: 450px;
    height: 250px;
    margin: 0 12px;
    border-radius: 10px;
}

.img-food-2 {
    width: 450px;
    height: 250px;
    margin: 0 12px;
    border-radius: 10px;    
}

2 Answers

Chris Jardine
Chris Jardine
13,299 Points
Chris Jardine
Chris Jardine
13,299 Points

Hi Joshua

you can set the width to the images to 100% and the height to auto;

.img-food-1 {
    width: 100%;
    height: auto;
    margin: 0 12px;
    border-radius: 10px;
}

.img-food-2 {
    width: 100%;
    height: auto;
    margin: 0 12px;
    border-radius: 10px;    
}
Joshua Inman
Joshua Inman
2,280 Points

Thanks for the reply Chris. I understand that making the images a percent value will create a fluid design but now I can't figure out how to make those images fit equally in there div background I assigned them too.

Chris Jardine
Chris Jardine
13,299 Points
Chris Jardine
Chris Jardine
13,299 Points

Hi Joshua

The reason is because of the margin you have on your images. There are a couple of things you can do. You can change the width using the "calc" for both img class.

.img-food-1 {
    width: calc(100% - 24px);
    height: auto;
    margin: 0 12px;
    border-radius: 10px;
}

or you can get rid of the margins of the img class and keep the width: 100% and then place a padding on their parents container 

.container-food-2 {
    width: 25%;
    margin-right: 23%;
    float: right;
    background-color: #f3f3f3;
  padding: 0 12px;
}