模态图像中的箭头（通过图像调整大小）

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; 
}