设置CSS中的块内的图像的相对位置 [英] Set relative position to an image inside a block in CSS

问题描述

我有一个块内的元素。块高度为500px，宽度为屏幕的100％。在这个配置，我知道我可以看到500px的原始高度（因为overflow：hidden属性设置在我的CSS文件）。

以下css：

  position：absolute; 
 top：0; 
 left：0; 
  

如何设置100％在我的顶部属性中查看图像的底部没有JavaScript？
对不起我的英语。这是一张图片，可以帮助您了解：

我需要知道是否有一种方法在CSS / HTML中做到这一点。在此之前，我使用background-position属性，但我切换到这是为了优化我的网站的性能（在我的情况下，后台使太重绘事件）。此外，我害怕使用JavaScript来获得像素的相对位置，因为我的设计是流畅的设计（窗口的100％），而风格重新计算会降低页面的性能。

请注意，图像不是静态的。

UPDATE 其实，底部：100％将图像设置为父高度的100％。但是如何将图像设置为 -100％以获得图像边缘？

您可以使用底部

c> CSS属性而不是 top 。例如，您的CSS可能看起来像这样：

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

使用绝对定位结合 / code>属性将允许你将图像的底部固定到最近的相对定位的元素 - 在这种情况下，包含div。

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!

解决方案

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.

这篇关于设置CSS中的块内的图像的相对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！