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

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

模态图像内的箭头（按图像调整大小）

1 个答案: