Floated Image with max-height set scales outside parent - CSS-Tricks

This topic is empty.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
July 18, 2011 at 12:13 pm #33545
donnapep
Member
Hello,

I have the following partial CSS:
```
//These dimensions are dynamic, but I'm using static values here.

#outer {

width: 300px;

height: 200px;

}

#weather {

overflow: hidden;

}

#icon {

float: left;

max-height: 100%;

width: auto;

}
```
And the following HTML:
```
•
```
All of the content is dynamically populated.

I want the icon to scale proportionally to fill as much of the outer div as possible, without scaling larger than its true dimensions. This works fine, but the problem is that the weather div extends outside of the outer div because the image is scaling to 200px (the height of outer). I really want it to scale to the height of outer minus the height of info, preferable in CSS and not JavaScript.

Thx.
July 18, 2011 at 2:10 pm #83563

furrball1383
Member

I’m not sure if you’ve looked it up but css3 supports max and min heights in dimension properties so you may want to just use those to keep the image from fitting the outer div.

never mind, i didn’t read the title all the way through the first time around.

July 18, 2011 at 2:17 pm #83564

chrisburton
Participant

min-height & max-height is also supported in CSS2 when it was introduced.

July 18, 2011 at 2:56 pm #83569

donnapep
Member

I’m a little lost. I’m already using max-height on the image. Should I be using it somewhere else or in a different way?

Thx.

July 18, 2011 at 3:01 pm #83570

chrisburton
Participant

Honestly, I have no idea what you’re trying to accomplish. Can you show in an image or upload your content live either to your site or http://jsfiddle.net?

July 18, 2011 at 9:44 pm #83588

furrball1383
Member

just changing the percentage in this case should fix it for you, leaving it as a percentage should make it so that the image can get bigger or smaller than its actual size but still stay within its container as it has a percentage less than 100.

@ChristopherBurton what they’re trying to do is have a in icon and text within a div, the objective being to keep the icon constrained within the div and sized so that it is squished between the text and the outer div. Ok now I don’t know if you’ll be able to understand what I just said…

@donnapep it may be best is you make a quick mock up of the div and what you’re expecting it to look like at 2 different sizes and put it up so hat we can use this to guage how you expect the icon to interact with the rest of the divs.

July 18, 2011 at 10:00 pm #83590

donnapep
Member

Here’s a working example – http://jsfiddle.net/3aZPU/2/

Note that jsFiddle actually shows it with scrollbars because it is not constraining my content to 600×600, as specified in the CSS. If it was confined to 600px high, Wednesday would not be viewable. So what I want to do in that case is scale all the images down so that they all fit. And if the container’s dimensions were changed to 600×1200 for example, I would not want the images to scale larger than their native dimensions.

As a little background, this is being used in digital signage. There are different zones of content on the screen. In this case, the zone is weather and the user gives it whatever size they want. The content can’t grow larger than the user-specified dimensions or it will run into content in other zones.

Thx.

July 18, 2011 at 10:31 pm #83592

furrball1383
Member

umm something wrong there sl1dr changing that value doesn’t change the dimensions of the icons but only of the bounding line you’ve added to see whats going on.

July 18, 2011 at 10:34 pm #83593

donnapep
Member

Hmmm…that didn’t have any effect. Here it is on its own inside of our web app with your recommended change (best to view this in Chrome if possible) – http://viewer-test.appspot.com/Viewer.html?type=presentation&id=b58ea734-aa33-4b39-b297-f4297dee269a

Notice how the image and info for Wednesday are cut off by the bottom edge of the div? I need to prevent that.

Thanks for all of the suggestions!

July 18, 2011 at 10:41 pm #83595

furrball1383
Member

hey sl1dr at the top where you said change this to see the icons resize. Also when I begin itself the icons are already out of the div. I tried changing the percentages after that but it seemed to have no effect on the icons themselves

July 18, 2011 at 11:07 pm #83597

furrball1383
Member

hmm I’m using the latest firefox, sorry i don’t keep anything else installed except the latest IE

July 19, 2011 at 9:19 am #83622

donnapep
Member

Hey, your solution is perfectly fine for my needs. I think it works great. Thanks so much!

July 19, 2011 at 12:00 pm #83635

donnapep
Member

Just to keep things interesting, would it also be possible to do the same thing to scale the width of the image down if the width of the container were made smaller?

July 22, 2011 at 3:48 pm #83802

donnapep
Member

Sounds good. Thanks again!
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

The forum ‘CSS’ is closed to new topics and replies.