Set relative position to an image inside a block in CSS

问题

I have a element inside a block. The block height is 500px and the width is 100% of the screen. In this configuration, i'm aware i can see 500px of the original height (because of the overflow:hidden property i set in my css file).

The image has the following css :

position: absolute;
top: 0;
left: 0;

How can set 100% in my top property to view the bottom of the image without JavaScript ? I'm sorry for my english. This is a image to help you to understand :

I need to know if there is a way to do this in CSS/HTML. Before that, i used the background-position property but i switched to this for optimizing the performance of my site (in my case, the background make too repaint event). Also, i'm afraid to using JavaScript to get a relative position in pixels because my design is a fluid design (100% of the window) and the style recalculation slowing down the performances of the page.

Please note, the image is not static. (The image is different in all pages of my site and has different resolutions).

UPDATE In fact, bottom:100% set the image at 100% of the parent height. But how set the image at -100% to get the edge of the image?

Again, sorry for my english, and thank you for your tips!

回答1:

You can use the bottom CSS property instead of top. For example, your CSS might look like this instead:

#imageContainer {
    position: relative;
    overflow: hidden;
    height: 100px;
}
#imageContainer > img {
    position: absolute;
    bottom: 0;
    left: 0;
}

Using the absolute positioning in combination with the bottom property will allow you to pin the bottom of the image to the nearest relatively positioned element--in this case, the containing div.

回答2:

From both your question and comments, it is rather confusing exactly what you are trying to achieve. However, it seems as though you are attempting to be able to show either the top or the bottom of the image at some particular time (you are not clear exactly when or how, but that may not really be relevant).

I've produced this fiddle which has the image at the top when not hovered, and at the bottom when it is hovered. This is more to demonstrate that you need to avoid any percentages of one or the other, as those will not work correctly since your image is constantly changing size based on the window width (so the percentage to shift it would always be changing).

The essence of the answer, however, is similar to what cm2 posted, but what you have not grasped. If you want the top showing, set top: 0, and if you want the bottom showing, set bottom: 0. If you are somehow toggling between them (as my fiddle does), then you need to set the opposite one to auto for it to work.

If I have completely not grasped what you are trying to achieve, please correct me.

来源：https://stackoverflow.com/questions/17438452/set-relative-position-to-an-image-inside-a-block-in-css

标签

html

css

image

position