Hi all again...
I managed to make it work fot left or right this way:
.big {
/* this is my outer <div> element */
position: relative;
overflow: hidden;
width: XXXpx;
height: YYYpx;
}
.big img {
position: absolute;
}
with this style, i just need to set left or right position on the
image:
.big img.left {
/* hide the image extra size from right */
left: 0px;
}
.big img.right {
/* hide the image extra size from left */
right: 0px;
}
.big img.center {
/* should hide the image extra size from both left and right */
}
The problem is that i just don't know how to implement the .center
class.
I tryed with some percent values, but it don't worked fine, since the
image width may vary.
I can get it's width by Js, but i really preffer to make it just by
CSS.
any help is wellcome...
Paulo Diovani escreveu:
> Hi All.
>
> I'm making a layout with a <div> with overflow hidden, with an <img>
> as its child.
> If the image width is greater than the <div>, it's right side is
> hidden, showing just some left portion of it, and then fully show by
> Js events (not relevant).
>
> The problem is that with some images, i need to hide it's left side
> (showing the right side) or both left and right (showing just the
> middle of the image).
>
> The code is simple as:
> <!-- the width and height values bellow are just examples -->
> <div style="width:160px; height:240px; overflow:hidden;">
> <img style="width:320px; height:240px;" />
> <div>
>
> Here is some layout scheme representation:
>
> [ div with overflow ] ---- this represents the <div> element bellow,
> with overflow:hidden, parent to the <img>
> < img element > ---- this represents the <img> element bellow, wich
> right side becomes hidden, child to <div>
>
> It appears as:
> [< ] >
>
> But i also need:
> < [ >]
> or:
> <[ ]>
>
> It there possible to make the layout have this behavior with just CSS?
> If so, how can i make it?
>
> --
> Paulo Diovani
> [EMAIL PROTECTED]
> +55 51 8146 5413
> ___________________
> http://www.diovani.com
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [EMAIL PROTECTED]
-~----------~----~----~----~------~----~------~--~---
