부트스트랩 회전목마 이미지가 제대로 정렬되지 않음
다음 이미지를 봐주시기 바랍니다, 부트스트랩 회전목마를 사용하여 이미지를 회전목마를 사용하고 있습니다.그러나 창 너비가 크면 이미지가 테두리와 제대로 정렬되지 않습니다.
하지만 부트스트랩이 제공하는 회전목마 예제는 창문의 폭에 상관없이 항상 잘 작동합니다.코드대로.
회전목마가 다르게 행동하는 이유를 설명해 줄 수 있는 사람?이미지 크기나 부트스트랩 구성이 누락된 것과 관련이 있습니까?
<section id="carousel">
<div class="hero-unit span6 columns">
<h2>Welcome to TACT !</h2>
<div id="myCarousel" class="carousel slide" >
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" >
<img alt="" src="/eboxapps/img/3pp-1.png">
<div class="carousel-caption">
<h4>1. Need a 3rd party jar?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-2.png">
<div class="carousel-caption">
<h4>2. Create Request</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-3.png">
<div class="carousel-caption">
<h4>3. What happens?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-4.png">
<div class="carousel-caption">
<h4>4. Status is Emailed</h4>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
해결책은 이 CSS 코드를 사용자 정의 CSS 파일에 넣는 것입니다.
.carousel-inner > .item > img {
margin: 0 auto;
}
부트스트랩 3의 경우 응답 클래스와 센터 클래스만 추가하면 됩니다.
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">
이렇게 하면 이미지 크기가 자동으로 조정되고 사진의 중심이 잡힙니다.
편집:
부트스트랩 4와 함께, 그냥 추가합니다.img-fluid학급
<img class="img-fluid" src="img/....jpg">
저는 같은 문제에 직면했고 이런 식으로 해결했습니다.이미지가 아닌 콘텐츠를 Carouel에 삽입하는 것이 가능하므로 사용할 수 있습니다.먼저 (중심 정렬을 만들 위치에) 삽입한 다음 이 눈금 안에 이미지를 삽입해야 합니다.
여기 내 코드(Ruby):
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<%= image_tag "couples/1.jpg" %>
</div>
<% (2..55).each do |t|%>
<div class="item">
<div class='inner-item'>
<%= image_tag "couples/#{t}.jpg" %>
</div>
</div>
<% end -%>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
그리고 내 css-code(.scss):
.inner-item {
text-align: center;
img {
margin: 0 auto;
}
}
vecozlov의 답은 부트스트랩 3에서 이미지의 중심을 잡기 위해 작동하지만 회전목마가 축소될 때 회전목마로 축소되는 대신 이미지의 크기가 유지됩니다.
대신 맨 위 회전목마에 이 작업을 수행합니다.div:
<div id="my-carousel" class="carousel slide"
style="max-width: 900px; margin: 0 auto">
...
</div>
이렇게 하면 전체 회전목마의 중심이 되고 이미지 폭(예: 900px 또는 원하는 대로 설정)을 초과하여 회전목마가 커지는 것을 방지할 수 있습니다.그러나 회전목마가 축소되면 이미지도 축소됩니다.
물론 CSS/LESS 파일에 이 스타일링 정보를 넣어야 합니다.
부트스트랩 4에서 추가할 수 있습니다.mx-auto당신의 클래스.img꼬리표를 매다
예를 들어 이미지의 너비가 75%인 경우 다음과 같이 표시됩니다.
<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">
부트스트랩이 자동으로 변환됩니다.mx-auto대상:
ml-auto, .mx-auto {
margin-left: auto !important;
}
.mr-auto, .mx-auto {
margin-right: auto !important;
}
이미지의 너비가 span6와 정확히 일치합니까? 이미지 크기가 다를 경우 이미지에 높이 속성을 붙여 이미지 간 크기가 동일한지 확인합니다.
당신의 경우, 이 높이와 회전목마 내부 디브의 너비 사이의 비율이 당신의 이미지의 가로 세로 비율과 같도록 높이를 설정해 보세요.
당신의 스타일과 관련이 있을 수도 있습니다.제 경우에는 상위 "아이템" 디브 내의 링크를 사용하고 있기 때문에 스타일시트를 변경하여 다음과 같이 말해야 했습니다.
.carousel .item a > img {
display: block;
line-height: 1;
}
기존 부스트랩 코드에 따라:
.carousel .item > img {
display: block;
line-height: 1;
}
그리고 제 이미지는 다음과 같습니다.
<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>
해결책이 있다고 생각합니다.
개인 스타일 시트 페이지에서 이미지 치수에 맞게 너비와 높이를 지정합니다.
해당 최상위 디브에 스팬이 있는 공간을 할당하는 별도의 "클래스"를 추가로 생성...(아래 표시)
<div class="span6 columns" class="carousel">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
bootstrap.css를 터치하지 않고, 자신만의 스타일 시트에서 "carousel"(또는 선택한 레이블)을 호출하여 원래 pix의 너비와 높이를 맞추십시오!
.carousel {
width: 320px;
height: 200px;
}
그래서 제 경우에는 320x200의 작은 이미지를 사용해서 회전목마를 하고 있습니다.bootstrap.css에는 미리 설정된 차원이 있을 것이지만, 나는 그것을 변경하는 것을 좋아하지 않기 때문에 향후 릴리스에서 최신 상태를 유지하려고 노력할 수 있습니다.도움이 됐으면 좋겠습니다.
저도 당신과 같은 문제에 직면해 있습니다.@thuliha의 힌트를 바탕으로 다음 코드들이 제 문제를 해결해주었습니다.
에서html파일을 다음 샘플로 수정합니다.
<img class="img-responsive center-block" src=".....png" alt="Third slide">
에서carousel.css, 클래스를 수정합니다.
.carousel .item {
text-align: center;
height: 470px;
background-color: #777;
}
이거 먹어봐요.
.item img{
max-height: 300px;
margin: auto;
}
@Art L. Richards의 해결책이 되지 않아 bootstrap.css에서는 원래의 코드가 이렇게 되었습니다.
.carousel .item > img {
display: block;
line-height: 1;
}
@rnaka530의 코드는 부트스트랩의 유동적인 특징을 깨뜨릴 것입니다.
좋은 해결책은 없지만 고쳤습니다.저는 부트스트랩의 회전목마 예를 매우 주의 깊게 관찰했습니다. http://twitter.github.com/bootstrap/javascript.html#carousel
Img width는 grid width 보다 커야 한다는 것을 알게 되었습니다.span9, 너비는 최대 870 px이므로 870 px보다 큰 이미지를 준비해야 합니다.img 외부에 용기가 더 많은 경우 모든 용기에 테두리 또는 여백이 있으므로 너비가 더 작은 이미지를 사용할 수 있습니다.
회전목마의 경우, 모든 이미지의 높이와 너비가 정확하게 같아야 한다고 생각합니다.
또한 부트스트랩에서 스캐폴딩 페이지를 다시 참조하면 span16 = 940 px이라고 확신합니다.이 점을 염두에 두고, 우리가 추측할 수 있다고 생각합니다.
<div class="row">
<div class="span4">
<!--left content div guessing around 235px in width -->
</div>
<div class="span8">
<!--right content div guessing around 470px in width -->
</div>
</div>
예, 이미지 폭이 너무 크면 디바가 다음 "열"로 이동하기 때문에 열 내의 스팬 공간을 설정할 때 주의해야 합니다.
회전목마가 있는 CSS parent div 클래스에 이것을 삽입합니다.
<div class="parent_div">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/slider_1.png" alt="">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>
CSS
.parent_div {
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}
언급URL : https://stackoverflow.com/questions/10591422/bootstrap-carousel-image-doesnt-align-properly
'programing' 카테고리의 다른 글
| CSS를 사용하여 절대 디브를 수평으로 센터링하는 방법? (0) | 2023.11.04 |
|---|---|
| sql 쿼리를 사용하여 ratio를 계산하는 방법은? (0) | 2023.11.04 |
| WebView에서 뒤로 가기 버튼을 누른 경우 이전 페이지로 돌아가는 방법은 무엇입니까? (0) | 2023.11.04 |
| 만약(x=0)이면 C에서 무엇을 의미합니까? (0) | 2023.11.04 |
| CLion으로 MariaDB의 소스 코드 검색 (0) | 2023.11.04 |