부트 스트랩/플렉스 박스 카드 : 이미지를 데스크탑의 왼쪽/오른쪽으로 옮깁니다.

Question

플렉스 박스가 활성화 된 부트 스트랩 4를 사용하여 다음 카드 레이아웃을 구축하려고합니다. 그림은 현재 구현에서 가져온 것으로 예상대로 작동합니다.

HTML 구조는 다음입니다 :

:

<section> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <div class="card"> 
      <div class="card-block"> 
      <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p> 
      <a href="#" class="btn btn-primary">Read More</a> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <img class="card-img-bottom" src="img1.jpg" alt="" title=""> 
     </div> 
    </div> 
    </div> 
</section> 

을 지금은 큰 화면으로 확장 할 때, 나는 (하나를 부트 스트랩 예상하지만 원하지 않는) 다음과 같은 결과를 얻었다

내가보기를 바란다 :

제 질문은 어떻게 이런 유형의 레이아웃을 올바르게 구현할 수 있습니까? 나는 플렉스 박스를 사용하고 있기 때문에 부트 스트랩 열 (col- *)은 항상 내가 원하는 바로 그 높이가됩니다. 하지만 두 열 사이의 패딩을 제거한 다음 두 열의 내용을 항상 부모 높이의 100 %를 덮도록 만들고 마지막으로 그림의 가로 세로 비율을 유지해야하므로 예를 들어있는 것처럼 센터에서 자릅니다.

나는 인터넷 검색을 해봤지만 많은 솔루션을 시도했지만 모두 너무 지나치게 복잡하거나 해킹 된 솔루션으로 보입니다. 그래서 이런 종류의 레이아웃을 구현하는 쉬운 방법이 없다는 것이 사실인가요?

참고 : 솔루션은 부트 스트랩 관련 일 필요는 없지만 이러한 종류의 문제에 대한 일반적인 해결책은 훨씬 좋습니다.

Answer 1

background-size : 표지를 사용하여이 작업을 수행하는 방법을 알아 냈습니다. 나는 img 대신 div를 사용해야했다. 그렇지 않으면이 솔루션이 작동하고 나의 경우 img가 그렇게 필요하지 않다. 다른 해결책은 여전히 ​​환영받습니다.

.card-img-bottom { 
    color: #fff; 
    height: 20rem; 
    background: url(images/img1.jpg) center no-repeat; 
    background-size: cover; 
} 

그리고 바탕 화면보기

, 내가 100 %로 높이가 너무 높이가 변경 : 나는 스타일 설정 카드 IMG 하단 들어

<section> 
    <div class="container"> 
    <div class="card"> 
     <div class="row"> 
     <div class="col-md-6"> 
      <div class="card-block"> 
      <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p> 
      <a href="#" class="btn btn-primary">Read More</a> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="card-img-bottom"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

:

나는 조금 내 HTML을 수정 항상 카드 블록 높이와 동일합니다.

부트 스트랩 기본 패딩으로 인해 데스크톱보기에서 카드 블록과 카드 이미지 하단 사이에 여유 공간이 남아 있습니다. 이러한 이유 때문에 흰색 영역이 이미지보다 약간 큽니다. 나를 위해 그것은 문제가 아니므로 나는 그들을 제거하지 않았다.