在絕對定位的容器

響應圖像問題嘗試使用此插件播放幻燈片時，我有點卡住。在絕對定位的容器

反正

問題是容器必須是位置：絕對這意味着我必須給它一個高度，從而相對於下面的元素其高度。

這是圖像的問題。我希望他們能夠做出反應。

所以基本上我想使用最大寬度：100％;.

問題很明顯，如果我的容器是例如600像素高，我的圖像是響應，那麼我的圖像高度將減少600px下，並留下空白。

我試過讓img的寬度爲100％，但是固定的高度，但是隨着您調整瀏覽器的大小，它們會歪斜。

我不確定是否有解決方案。

任何想法？

這裏舉例：

https://jsfiddle.net/u08vrpt2/

HTML

<body> 
    <div class="image"> 
     <div class="image__item"> 
      <img src="https://s15.postimg.org/qwsiomo97/test.jpg" alt="test image"> 
     </div> 
    </div> 
</body>

CSS

.image { 
    position: relative; 
    max-width: 1200px; 
    margin: 0 auto; 
    height: 500px; 
    background: grey; 
} 

.image__item { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

img { 
    max-width: 100%; 
}

來源

2016-12-05 Joe Consterdine

爲什麼容器需要是絕對的？如果我們刪除，你仍然有同樣的行爲

.image { 
 
    position: relative; 
 
    max-width: 1200px; 
 
    background: grey; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    display: block; 
 
    height: auto; 
 
    margin: 0 auto; 
 
}

<div class="image"> 
 
    <div class="image__item"> 
 
    <img src="https://s15.postimg.org/qwsiomo97/test.jpg" alt="test image"> 
 
    </div> 
 
</div> 
 
<p>This text respect the image height</p>

來源

2016-12-05 20:49:31

因爲插件不能正常加載圖像，如果我將其刪除。當你去每個幻燈片跳躍。 –

在絕對定位的容器

回答

相關問題