如何將圖像放入非固定高度的容器中？

-1

我想將圖像放入非固定的heigth容器中。這段代碼不起作用，我不知道爲什麼。如何將圖像放入非固定高度的容器中？

<!DOCTYPE html> 
<html> 
<head> 
    <style rel="stylesheet" type="text/css"> 
    .wrapper { 
     /*height: 50vh;*/ 
     max-height: 50vh; 
     background: #a00; 
    } 
    .wrapper img { 
     max-height: 100%; 
    } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
    <img src="http://www.nasa.gov/sites/default/files/thumbnails/image/7395_saturn_gill_infrared.jpg"> 
    </div> 
</body> 
</html>

您在取消對height: 50vh;但我不想要固定高度時得到預期的結果。

有什麼想法？

更新：我爲什麼要這麼做？

真實世界的例子是一個滑塊下的圖片與幻燈片下方（不覆蓋他們，但真的在外面）分頁子彈。如果用戶使用的視口高度小於滑塊的默認高度，那麼我希望用戶能夠在視口中看到整個幻燈片和分頁項目符號。

幻燈片（圖片）是內容，而不是樣式元素。因此，基於CSS背景的解決方案並不是我正在尋找的。

來源

2016-08-10 Alia Spencer

你試圖達到什麼目的？如果你沒有給包裝分配一個高度，那麼圖像就會佔用它的原始大小。 –

你最好將圖像設置爲背景。 – 3rdthemagical

@Paulie_D我在我的問題中添加了我想實現的內容。我沒有給包裝指定高度，但是最大高度和圖像佔用了原始大小，你是對的，但我不明白爲什麼。你有任何資源來幫助我理解這部分的CSS？ –

你需要使圖像背景的股利或容器這樣

<div id='box'> 
    <div id='image'></div> 
</div> 

html, body { 
    width: 100; 
    height: 100%; 
} 
#box { 
    width: 90%; 
    height: 90%; 
    background: #eee; 
} 
#image { 
    background-image: url(http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg); 
    background-size: 500px; 
    background-repeat: no-repeat; 
    width: 500px; 
    height: 500px; 
}

你看到的圖像具有固定的高度，容器可以有一個基於變量％的寬度或高度。

來源

2016-08-10 14:26:03

可能有效，但圖像代表文檔中的一些有意義的內容。它必須在語義上是HTML的一部分。背景圖像被視爲造型元素。 –

請勿使用包裝強制執行高度。相反，直接在您的CSS中爲<img>標記設置max-height。我添加了一個滑塊下方的一個片段（我沒有包括滑動分頁按鈕的功能）：我使用calc以允許分頁，以適應

(function() { 
 
    var sliderItemIdx = 0; 
 

 
    setInterval(function() { 
 
    var allSliderItemEls = document.querySelectorAll('.slider > .slider-item'); 
 
    var activeSliderItemEls = document.querySelectorAll('.slider > .slider-item.active'); 
 

 
    // Update the current item index 
 
    sliderItemIdx = (sliderItemIdx + 1) % allSliderItemEls.length; 
 

 
    // Remove active class 
 
    [].forEach.call(activeSliderItemEls, function(sliderItemEl) { 
 
     sliderItemEl.classList.remove('active'); 
 
    }); 
 

 
    // Add active to current item 
 
    allSliderItemEls[sliderItemIdx].classList.add('active'); 
 

 
    }, 2000); 
 

 
})();

html, body { margin: 0px; padding: 0px; } 
 

 
.slider { 
 
    background: #a00; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
} 
 

 
.slider-item { 
 
    position: absolute; 
 
    left: 100%; 
 
} 
 

 
.slider-item.active { 
 
    position: relative; 
 
    left: 0%; 
 
    margin: 0px; 
 
} 
 

 
.slider-item img { max-height: calc(50vh - 30px); } 
 
.pagination { line-height: 30px; } 
 
.pagination > .page { text-decoration: none; font-size: 2.5em; } 
 
.pagination > .page::before { content: '\2022'; }

<div class="slider"> 
 
    <figure class="slider-item active"> 
 
    <img src="https://i.stack.imgur.com/memI0.png"> 
 
    </figure> 
 
    <figure class="slider-item"> 
 
    <img src="https://i.stack.imgur.com/P59NF.png"> 
 
    </figure> 
 
    <figure class="slider-item"> 
 
    <img src="https://i.stack.imgur.com/OVOg3.jpg"> 
 
    </figure> 
 
    <div class="pagination"> 
 
    <a class="page" href="#item-1" title="Item 1"></a> 
 
    <a class="page" href="#item-2" title="Item 2"></a> 
 
    <a class="page" href="#item-3" title="Item 3"></a> 
 
    </div> 
 
</div>

注在它下面。

來源

2016-08-10 14:28:07 BDawg

第一個解決方案的工作，但不是在我的現實世界的例子。它是一個幻燈片底部的分頁子彈的圖片滑塊，我希望幻燈片和分頁子彈永遠不會超過某個高度相對於視口高度（因此使用vh單元）。第二種解決方案在語義上不正確。圖像是內容，而不是造型，因此，它不能成爲背景圖像。 –

你絕對正確。現在我們知道您正在構建滑塊，但背景圖像在語義上不正確。我會更新答案 – BDawg

@AliaSpencer已更新。讓我知道如果這仍然不適合你。 – BDawg

如何將圖像放入非固定高度的容器中？

回答

相關問題