이미지가있는 CSS 100 % 높이 열

Question

몇 가지 기법을 시도했지만이 문제에 봉착했습니다. 섹션 객체 내에서 전체 높이 값 열을 사용하고 싶습니다. 그러나 하나의 열은 하나의 열을 채우기 위해 크기를 조절해야하는 이미지가 있습니다.

그래서 WordPress의 가변 내용 인 텍스트의 한 열에 너비가 66 %이고 이미지를 보유하고 33 % 너비의 열이 하나 있습니다. 이미지는 클래스를 기반으로 왼쪽이나 오른쪽에있을 수 있습니다.

내 HTML 다음 CSS 기술의 대부분

<section class="page-section color-brand left-image image-third"> 
    <div class="page-section-mid-wrapper"> 
     <div class="image-wrapper left-image image-third"> 
      <img src="img.jpg" alt=""> 
     </div> 
     <div class="page-section-wrapper"> 
      <div class="page-section-content"> 
       Variable content here 
      </div> 
     </div> 
    </div> 
</section> 

트릭은 모두 열에서 단색 배경 색을 얻을 않습니다. 그러나이 경우 크기 조정 된 이미지가 필요합니다. img 태그에서 인라인 style="background-image"으로 전환하여 기꺼이 스케일링을 얻지 만, 어느 쪽이든, 열 높이를 맞추는 데 문제가 있습니다.

가장 가까운 해결책은 display:table을 사용하는 것이지만 HTML을 변경하지 않고 이미지의 어느면을 변경할 수없는 것은 좋지 않습니다. 현재 float 기반 디자인을 사용하여 다른 클래스 (예 : 위의 left-image)로 이미지 배치를 바꿀 수 있습니다.

그냥 떠 다니는 사람이 여기 있습니다. http://jsfiddle.net/no80ayc2/2/ 보기가 좁 으면 이미지가 전체 컨테이너 높이보다 짧습니다.

상대 위치/절대 위치 지정 사용에 관한 내용을 읽었으나 작동하도록 설정할 수있는 유일한 방법은 컨테이너의 고정 높이를 사용하는 것이 었습니다. 그게 나를 위해 작동하지 않습니다 : http://jsfiddle.net/qLa4g7fL/1/

편집 : 분명히하기 위해, 전체 공간 (폭 33 %, 높이 100 %)을 채우기를 원합니다. 그리고 나는 그것이 필요한만큼 자르기를 기대합니다. 여기

그런 다음 이미지 - 래퍼는 전체 높이가되지 않을 수 있지만이 중지됩니다

.page-section.image-third .image-wrapper img에서 max-width:100%에 그 모양 방법의 예 (그냥 빨리 생각)

Answer 1

변화 min-width: 100%입니다 오버플로 할 이미지.

Answer 2

You need to change your min-width to max-width, 
Try to look at this link, I just update your code 

http://jsfiddle.net/no80ayc2/7/ 

Answer 3

object-fit이라는 새로운 놀라운 CSS 속성이 있습니다.

https://css-tricks.com/almanac/properties/o/object-fit/

당신은 사랑에 빠질거야!