모달 이미지 안의 화살표

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