Stylesheets - CSS width contrain question...

Author

CSS width contrain question...

nboutelier@hotmail.com

2005-12-05, 6:59 pm

Is there any way to get the (div.image or li.image) to shrink to the
size (+margin/padding) of the contained image without adding another
class to the div?

I would like to keep the img in a div.file so I can keep all imgs the
same size without distortion. Explanation: Not all images are 72x72.
Some are 72x125, 120x72, etc, but my point is they all have an original
minimum with or height of 72. If this works the way im hoping it could,
all the images would be the exact same size with no image distortion,
just hiding the excess.

I could just replace the div.image with a table and set the width to
1%, but im wondering if theres a way to do this without tables.

Thanks for any suggestions! -Nick

<style>
..images li {
float: left;
}
..image {
border: 1px solid #999999;
padding: 10px;
margin: 0px 14px 14px 0px;
}
..thumb {
width: 72px;
height: 72px;
overflow: hidden;
}
</style>


<div class="image">
<div class="file thumb"><img src="image.jpg"></div>
<div class="title">Image Title</div>
<div class="description">Some image description text...</div>
</div>


<ul class="images">
<li class="image">
<div class="file thumb"><img src="image.jpg"></div>
<div class="title">Image Title</div>
<div class="description">Some image description text...</div>
</li>
<li class="image">
<div class="file thumb"><img src="image.jpg"></div>
<div class="title">Image Title</div>
<div class="description">Some image description text...</div>
</li>
<li class="image">
<div class="file thumb"><img src="image.jpg"></div>
<div class="title">Image Title</div>
<div class="description">Some image description text...</div>
</li>
</ul>

Adam Risser

2005-12-06, 7:29 pm

Any any part of the image that would be beyond the height and the width
of the div would not show? You want to know if you can basically crop
the image with a div tag? Is that correct?

nboutelier@hotmail.com

2005-12-06, 11:16 pm

No that part is already done. After the image is cropped by the div, I
would like the parent div to shrink to the width of the cropped image.

For example if I was using html I would include the cropped div in a
table and set the width to 1%. However, setting a div to 1% width
shrinks itself smaller than the cropped image.

I hope that makes sense. If worst case scenario, I can always use
tables but it seems like someone always has a solution for any css
related scenario.

-Nick

Adam Risser wrote:
> Any any part of the image that would be beyond the height and the width
> of the div would not show? You want to know if you can basically crop
> the image with a div tag? Is that correct?

Spartanicus

2005-12-07, 7:14 am

nboutelier@hotmail.com wrote:

><style>

Don't post code to the group, make a minimized test case, upload it,
post the url.

--
Spartanicus

Adam Risser

2005-12-07, 11:02 pm

Sorry I guess I dont follow. If the div has cropped the image, then it
is the size of the cropped image because its doing the cropping

If you know how to do it in tables, do it in tables and post the link
(not the code) here. Then we can look at it and tell you how to do the
same thing w/o the table.

Adam

nboutelier@hotmail.com

2005-12-07, 11:03 pm

Heres an example. Note: I would like the .image class to work/look the
same whether its a div or li element. -Nick

http://www.nickboutelier.com/testcss/

Adam Risser

2005-12-07, 11:03 pm

At least now I understand the problem :) Quickly looking at it, I
would try

display: table-cell;

in ".image"

I'm sure there is a better way, but that should bring the width in and
keep it variable if your picture size changes.

Is your image size going to change? If not, the why not just hardcode
the width?

Adam

nboutelier@hotmail.com

2005-12-07, 11:03 pm

Thanks Adam, youre the man! "display:table" instead of
"display:table-cell" did the trick, at least testing in Safari. Thanks
for the help! -Nick