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 Laura Cressman
Laura Cressman
12,548 Points

Challenge: Fix my CodePen?

Hi friends, I'm trying to learn about how to size images using CSS, and in this particular example am trying to have the image float to the left (done) but take up the exact height of the parent element, the div. For some reason, even though the height is set to 100%, the image isn't sizing right. Any thoughts? Here's the link, should you choose to accept: http://codepen.io/anon/pen/vGDtK Thanks! Laura:)

James Barnett
James Barnett
39,199 Points

Laura Cressman - I like your post title. :smirk:

Laura Cressman
Laura Cressman
12,548 Points

Thank you!

5 Answers

Robert Newman
Robert Newman
29,571 Points
Robert Newman
Robert Newman
29,571 Points

One way to do it is to set the height of the div to pixels instead of a percentage and the picture will resize accordingly.

Laura Cressman
Laura Cressman
12,548 Points

That makes sense, but what if I don't know the height of the text in pixels?

James Barnett
James Barnett
39,199 Points

> what if I don't know the height of the text in pixels

How about using media queries?

Have the container width & height along with the font-size re-size based on the size of the view-port.

Laura Cressman
Laura Cressman
12,548 Points

That might work too, but wouldn't I still need to know the height at a certain screen width for example? Is there any way to just have it always be as tall as the containing div?

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

You may want to check out this article.

Thomas Jones
Thomas Jones
1,951 Points
Thomas Jones
Thomas Jones
1,951 Points

I'm noob so take my response with a grain of salt, but could you not also set your min-height: 100%;?

Tom Lawrence
Tom Lawrence
8,685 Points
Tom Lawrence
Tom Lawrence
8,685 Points

Do you mean like this?

http://cdpn.io/bsqjn

http://codepen.io/tomlawrenceuk/full/bsqjn

Laura Cressman
Laura Cressman
12,548 Points

I was thinking more having the picture be to the left of the text and take up the full height of the div, so no wrapping of text.

Ashlynn Pai
Ashlynn Pai
11,679 Points
Ashlynn Pai
Ashlynn Pai
11,679 Points

Here's my stab at it:

http://codepen.io/ashlynnpai/pen/wrema

(I replaced the image with an image that I own).

My native resolution is 1920 so I had to keep resizing. At 1920 the img does naturally fill the div and the text doesn't. I can see your issue when I resized to around 1600. So I tried to make it to what I think you want at around 1000-1600 and for mobile screens the text will go under the img.

I think keeping both img and text at the same height will be hard because the browser preserves the h x w ratio of the image no matter the resolution.

I haven't tried out flexboxes yet, not sure if there is a solution there?