模態圖像中的箭頭（通過圖像調整大小）

Question

在我的模態傳送帶上，有時箭頭有時位於圖像內部，有時位於圖像外部..取決於圖像分辨率。而且我希望在不同分辨率的每張圖片中都有箭頭。

Answer 1

在審查了網站之後，而不是將寬度設置爲100％，並將高度設置爲自動，但最好做相反的概念，以下是進行所需更改的CSS！

CSS屬性text-align: center;應該被設置爲ID carousel-modal-demo

#carousel-modal-demo{ 
    text-align: center !important; 
} 

轉盤內類需要如下所示進行修改！

.carousel-inner { 
    position: relative !important; 
    overflow: hidden !important; 
    display: inline-block !important; 
} 

旋轉木馬CSS下的圖像需要像這樣修改。

#carousel-modal-demo img{ 
    width: auto !important; 
    height: 400px !important; 
} 

id #modal頂部應該有50px的填充。

#modal{ 
    padding-top:50px !important; 
} 

所以總CSS的變化是：

#carousel-modal-demo{ 
    text-align: center !important; 
} 

.carousel-inner { 
    position: relative !important; 
    overflow: hidden !important; 
    display: inline-block !important; 
} 

#carousel-modal-demo img{ 
    width: auto !important; 
    height: 400px !important; 
} 

#modal{ 
    padding-top:50px !important; 
} 

它，因爲你設置的CSS屬性max-width:100%的轉盤中的所有圖像。如果使用下面的CSS類將其設置爲width:100%。

#carousel-modal-demo div.item > img { 
    width: 100% !important; 
} 

被重寫的類是下面的類。

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}