IT

Bootstrap Carousel 이미지가 제대로 작동하지 않습니다.

lottoking 2020. 9. 6. 10:17
반응형

Bootstrap Carousel 이미지가 제대로 작동하지 않습니다.

다음 이미지를보세요. 부트 캐어 러셀을 사용하여 이미지를 회전하고 있습니다. 그러나 모든 것이 제대로 작동하지 않습니다.

그러나 부트 유효성에서 제공하는 캐 러셀 예제는 창 너비에 관계없이 항상 잘 작동합니다. 코드를 수행하십시오.

누군가 캐 러셀이 다르게 작동하는 이유를 설명 할 수 있습니까? 이것이 이미지 크기와 관련이 있습니까? 아니면 일부 부트 검증 구성이 누락 되었습니까?

<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">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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">

나는 같은 문제에 직면하여 다음과 같이 해결했다. 이미지가 아닌 콘텐츠를 Carousel에 삽입 할 수 있으므로 사용할 수 있습니다. 먼저 div.inner-item(중앙 정렬을 할 위치)를 삽입 한 다음이 div 안에 이미지를 삽입해야합니다.

다음은 내 코드 (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">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

그리고 내 CSS 코드 (.scss) :

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}

하지만 vekozlov 의 대답은 이미지를 중앙에 부트 스트랩 3에서 작동 회전 목마가 축소 될 때, 그것은 깰 것 : 이미지가 회전 목마 아래로 확장하는 대신 크기를 유지합니다.

대신 최상위 캐 러셀에서 div다음을 수행하세요 .

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

이렇게하면 전체 캐 러셀이 중앙에 배치되고 이미지 너비 (예 : 900 픽셀 또는 원하는대로 설정)를 초과하는 것을 방지 할 수 있습니다. 그러나 캐 러셀이 축소되면 이미지도 함께 축소됩니다.

물론이 스타일 정보를 CSS / LESS 파일에 넣어야합니다.

그것은 당신의 스타일과 관련이있을 수 있습니다. 제 경우에는 상위 "item"div 내에서 링크를 사용하고 있으므로 다음과 같이 스타일 시트를 변경해야했습니다.

.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에 별도의 추가 "클래스"를 만듭니다. (아래에 표시) 

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

이미지의 너비가 span6과 정확히 460px입니까? 제 경우에는 이미지 크기가 서로 다른 경우 이미지에 높이 속성을 추가하여 이미지가 모두 같은 높이이고 회전식 메뉴가 이미지간에 크기가 조정되지 않도록합니다.

귀하의 경우이 높이와 회전식 내부 div의 너비 사이의 비율이 이미지의 aspectRatio와 같도록 높이를 설정하십시오.

@Art L. Richards의 솔루션이 작동하지 않았습니다. 이제 bootstrap.css에서 원본 코드는 이렇게되었습니다.

.carousel .item > img {
  display: block;
  line-height: 1;
}

@ rnaka530의 코드는 부트 스트랩의 유동적 기능을 손상시킬 것입니다.

나는 좋은 해결책이 없지만 그것을 고쳤습니다. 저는 부트 스트랩의 캐 러셀 예제를 매우주의 깊게 관찰했습니다 . http://twitter.github.com/bootstrap/javascript.html#carousel .

img 너비가 그리드 너비보다 커야한다는 것을 알았습니다. 에서 span9당신이 870px보다 이미지가 더 준비해야하므로, 최대 870px에있다 폭. 모든 컨테이너에 테두리 또는 여백이 있으므로 img 외부에 컨테이너가 더 있으면 너비가 더 작은 이미지를 사용할 수 있습니다.

캐 러셀의 경우 모든 이미지의 높이와 너비가 정확히 같아야한다고 생각합니다.

또한 부트 유효성에서 스캐 폴딩 페이지를 다시 참조하면 span16 = 940px을 확신합니다. 이 점을 염두에두고 우리는

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

예, 행 내에서 거리 공간을 접근 할 수 있습니다. 이미지 너비가 크면 div를 다음 "행"으로 보내 재미가 없습니다.

링크 1

캐 러셀이있는 CSS 상위 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];
}

Bootstrap 4에서는 태그 에 mx-auto클래스를 추가 할 수 있습니다 img.

예를 들어 이미지의 너비가 75 %이면 다음과 같이 표시됩니다.

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

Bootstrap은 다음으로 자동 번역 mx-auto됩니다.

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

참고 URL : https://stackoverflow.com/questions/10591422/bootstrap-carousel-image-doesnt-align-properly

반응형

'IT' 카테고리의 다른 글

명령 줄에서 여러 AWS 계정을 사용하는 방법은 무엇입니까?  (0) 2020.09.06
Backbone.js로 정렬 순서 반전  (0) 2020.09.06
키보드 높이를 얻는 방법?  (0) 2020.09.06
Angular 2에서 CSS를 동적으로 업데이트  (0) 2020.09.06
활동 종료 ()에 애니메이션을 어떻게 추가 할 수 있습니까?  (0) 2020.09.06

'IT'의 다른글

  • 현재글Bootstrap Carousel 이미지가 제대로 작동하지 않습니다.

관련글

댓글

티스토리툴바