[트위터 부트 스트랩] 각면에 사진 및 텍스트가있는 부트 스트랩 전체 너비 행

업데이트 됨

여기에서 데모 확인

이 시도:

HTML :

<div class="row row-height">
  <div class="col-sm-4 col-custom pr0">
      <div class="img-box">
            <img src="http://agrofields.cmsmasters.net/wp-content/uploads/2014/11/bg-03.jpg" alt="about" class="img-responsive">
                </div>
                    <!-- end img box -->
                      </div>
                      
                        <div class="col-sm-8 col-custom">
                            <div id="about-text">
                                  <p id="demo">Malta 5D is a new generation theatre where you feel the “real” emotions of the movie. In a short time, you may explore the colourful and impressive episodes of the Maltese history and culture, magnified with 3D film, moving seats, water spray, air
                                          blasts and leg ticklers. A unique experience for all ages! An exhibition of works by local artists will be on display in the foyer.</p>
                                              </div>
                                                  <!-- end about text-->
                                                  
                                                    </div>
                                                      <!-- end col -->
                                                      </div>
                                                      <!-- end row -->
                                                      

CSS :

.row-height {
  display: flex;
  }
  
  .pr0 {
    padding-right: 0;
    }
    
    .col-custom {
      border: 1px solid blue;
      }
      
      .img-box {
        display: inline-flex;
          width: 100%;
            height: 100%;
            }
            
            .img-box img {
              object-fit: cover
              }
              

-------------------

다음을 구현하는 가장 좋은 방법 은 css에서 vh 또는 "view height"속성 을 사용하는 것 입니다.

예를 들어 이미지 div에 추가 된 클래스가 '이미지'인 경우. 코드는 다음과 같습니다.

.image{
    height:100vh;
    }
    

분명히 그 위치는 웹 페이지에 상대적이므로 더 나은 업데이트 코드 스 니펫이 더 나은 아이디어를 제공합니다.

출처
https://stackoverflow.com/questions/39915934