如何根據窗口大小更改圖像大小

我正在處理我的第一個網站。我製作了一個大型圖像橫幅，它正在工作，但我在設置高度時遇到了問題。當我試圖用％高度做到這一點時，我的旗幟消失了。我希望使窗口很小時使其響應並縮短。這裏是我的代碼和CSS樣式div容器：如何根據窗口大小更改圖像大小

#slides-container 
 
{ 
 
\t width: 100%; 
 
\t height: 400px; 
 
\t margin: 0 auto; 
 
\t position: relative; 
 
} 
 
#slides-container>img 
 
{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: absolute; 
 
    max-width: 100% 
 
} 
 
#slides-container>.arrow-button 
 
{ 
 
\t position: absolute; 
 
\t width: 50px; 
 
\t height: 50px; 
 
\t border: none; 
 
\t border-radius: 25px; 
 
\t top: 200px; 
 
\t background: none; 
 
\t color: white; 
 
\t font-size: 20px; 
 
} 
 
#slides-container>#button-next:hover 
 
{ 
 
\t box-shadow: 10px 0px 20px 0px black; 
 
} 
 
#slides-container>#button-previous:hover 
 
{ 
 
\t box-shadow: -10px 0px 20px 0px black; 
 
} 
 
#slides-container>#button-previous 
 
{ 
 
\t position: relative; 
 
\t float: right; 
 
} 
 
.slide-fade 
 
{ 
 
\t animation-name: fade; 
 
\t animation-duration: 0.2s; 
 
} 
 
@keyframes fade 
 
{ 
 
\t from{opacity: 0.4} 
 
\t to{opacity: 1} 
 
}

<div id="slides-container"> 
 
     <img class="slides slide-fade img-responsive" src="img/1.jpg"/> 
 
     <img class="slides slide-fade img-responsive" src="img/2.jpg"/> 
 
     <img class="slides slide-fade img-responsive" src="img/3.jpg"/> 
 
     <img class="slides slide-fade img-responsive" src="img/4.jpg"/> 
 
     <img class="slides slide-fade img-responsive" src="img/5.jpg"/> 
 
     <button class="arrow-button" onclick="plusIndex(-1)" id="button-next">&#10094;</button> 
 
     <button class="arrow-button" onclick="plusIndex(1)" id="button-previous">&#10095;</button> 
 
    </div>

來源

2017-08-24 Dappy

我想你忘了添加CSS代碼。 – RBCunhaDesign

你爲什麼不試試class =「img-responsive」的引導 –

Soryy不知道爲什麼我不能編輯和包含我的CSS等一會兒。 img-responsive不起作用。它仍然沒有在垂直響應.. – Dappy

可以使用vh而不是%。這是在每個視圖高度使高度響應的另一種方式。相對於視口高度的1％*

來源

2017-08-25 06:58:11 bellabelle

如何根據窗口大小更改圖像大小

回答

相關問題