モーダル画像内の矢印

Question

私のモーダルカルーセルには、時には内側に、時には外側にある矢印があります。画像の解像度に依存します。そして私は、異なる解像度ですべての画像の中に矢印を持っていたい。

Answer 1

サイトを確認した後、幅を100％と高さに設定するのではなく、その逆のコンセプトを実行する方が良いでしょう。ここで必要な変更を行うためのCSSがあります。

CSSプロパティはtext-align: center;carousel-modal-demo

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

カルーセルインナークラスは、以下のように変更する必要があるIDに設定する必要があります！

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