<div style="overflow:hidden; height:100px; width:100px;">
<image src="etc.jpg" width:"100px" /></div>
I've got an img into a div. The height of the IMG is undefined but it is bigger than the 100px of the DIV.
I want to vertical centering the IMG and hide the top and bottom hoverflow.
Still I can't understand how to do this...
Daniele
You can try to set the margin-top property of the image at a negative percentage. For example;
div img {margin-top: -50%;}
Just play with the percentage values and you should find something that works.
Does this work for you?
<div style="overflow:hidden; height:100px; width:100px;">
<image src="etc.jpg" style="width:100px; position: relative; bottom: 25%;" />
</div>
Hmmm the result is a bit weird when the image does fit
You could, potentially, use the following:
img {
position: absolute; /* required for the use of 'clip' property; remember to position the parent/containing element appropriately. */
clip: rect(0 100px 100px 0);
}
The clip: rect(0 200px 100px 100px) breaks down as follows:
clip: shape([top] [right] [left] [bottom]);
'rect' is the only shape option.
the top-left corner is defined by the [top] and [left] values, the lower-right corner defined by the [right] and [bottom] values. In this case a rectangle is defined between points (0,0) and (100px,100px).
Further information, and demonstrations of clip are: