전체 높이 이미지가 반응하는 Div 부분 50 %

Question

텍스트와 이미지 사이에 50 % 나 떨어진 div가 있습니다. 나는 텍스트가 항상 텍스트와 동일한 높이가되도록 이미지를 만들고 싶습니다. 저는 오늘 아침에 수많은 게시물을 따라 왔지만 제대로 작동하지 않는 것 같습니다.

현재 페이지의 예를 볼 수 있습니다

: http://pagedev.co.uk/bowmite/test/electrical.html

내가 거의 다라고 생각, 당신은 사업부의 기반이 .. 이미지가 바로 아래에 맞게 필요 보여줍니다 오렌지 배경을 볼 수 있습니다 필요한이 오버 플로우 ...

내 HTML은 다음과 같습니다

<div class="split-wrapper"> 
         <div class="split-left"> 
          <p>Our focus is quality, pure and simple. We strive to retain our high standards and reputation whilst learning from each successful high quality installation. Implementating control procedures within an ever changing market place has been key to our success.</p> 
          <p>You will find our site teams are efficiently supervised with high levels of management availability and client liaison. We enjoy long term relationships with many of our clients, thanks to our comprehensive understanding of quality.</p> 
         </div> 

         <div class="split-right"> 
          <img class="right-align-image" src="images/electrical-bottom.jpg"> 
         </div> 
        </div> 

내 CSS는 다음과 같습니다

.split-wrapper { 
    width:100%; 
    height:auto; 
    background-color:#ff6600; 
    margin-bottom:20px; 
    display:inline-block; 

    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    -khtml-border-radius: 4px; 
} 

.split-left { 
    width:40%; 
    height:100%; 
    padding-right:5%; 
    padding-left:5%; 
    padding-top:25px; 
    padding-bottom:15px; 
    display:inline-block; 
    float:left; 

    background-color:#ffffff; 
    -moz-border-radius-topleft: 4px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 4px; 

    -webkit-border-top-left-radius: 4px; 
    -webkit-border-top-right-radius: 0px; 
    -webkit-border-bottom-right-radius: 0px; 
    -webkit-border-bottom-left-radius: 4px; 
} 

.split-right { 
    width:50%; 
    height:auto; 
    float:left; 
    background-color:#ffffff; 
    overflow:hidden; 

    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 4px; 
    -moz-border-radius-bottomright: 4px; 
    -moz-border-radius-bottomleft: 0px; 

    -webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 4px; 
    -webkit-border-bottom-right-radius: 4px; 
    -webkit-border-bottom-left-radius: 0px; 
} 

.split-right img { 
    width:; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 4px; 
    -moz-border-radius-bottomright: 4px; 
    -moz-border-radius-bottomleft: 0px; 

    -webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 4px; 
    -webkit-border-bottom-right-radius: 4px; 
    -webkit-border-bottom-left-radius: 0px; 
} 

Answer 1

분할 열에는 CSS 테이블 레이아웃을 사용하고 오른쪽에는 배경 이미지를 사용합니다.

CSS tables 및 CSS3 background-size에 대한 지원은 매우 적절하고 논리적이고 사용하기 쉽습니다. 또한 뷰포트가 분할 된 레이아웃에 비해 너무 작 으면 자연스럽게 유연 해지고 응답 성이 좋으며 미디어 쿼리로 쉽게 변경할 수 있습니다.

.split { 
    display:table; 
    background:#fff; 
    border-radius:5px; 
    overflow:hidden; 
    margin:50px; 
} 
.split .col { 
    display:table-cell; 
    width:50%; padding:30px; 
} 
.split .imgbg { 
    background: url(http://pagedev.co.uk/bowmite/test/images/electrical-bottom.jpg) no-repeat center center fixed; 
    background-size: cover; 
} 
@media only screen and (max-width: 480px) { 
    .split { 
     display:block; 
    } 
    .split .col { 
     display:block; 
     width:auto; 
    } 
    .split .imgbg { 
     height:100px; 
    } 
} 

데모에서 : http://jsfiddle.net/fc4coukr/
난 당신이 그것을 위해 jQuery를 사용할 필요가 생각

Answer 2

첫 번째 해결책은 원하는 너비를 정확하게 말하고 있습니다. 미디어 쿼리를 사용하려면 다음과 같이 말할 수 있습니다.이 해상도의 경우이 너비와 높이를 가진이 이미지를 원합니다.

또 다른 해결책 배경과 같은 이미지를 사용하여 모든 컨테이너 충당하기 위해 CSS를 통해 말하고있다 :

.split-wrapper { 
width: 100%; 
height: auto; 
background: url('../images/electrical-bottom.jpg'); 
background-size: cover; 
margin-bottom: 20px; 
display: inline-block; 
border-radius: 4px; 

} 문제는 ​​당신이 좋아하는 것처럼 어쩌면 사진이되지 않는 것입니다

하는 에.

background-size properties으로 해보십시오.

Answer 3

당신은 당신이 뭘 하려는지 달성하기 위해 다음과 같은 jQuery 코드를 사용할 수 있습니다

$(document).ready(function() { 
    $('.split-right img').height($('.split-left').outerHeight()); 
}); 

split-left 사업부는 국경을 포함하여 그 안에 모든 텍스트와 393px의 높이를 가지고 있으며, 위의 jQuery를 코드는 해당 높이를 이미지에 지정합니다. divdiv 안에있는 텍스트의 길이를 변경하더라도 작동합니다.

둘째, 당신은 당신의 스타일 시트에 다음 CSS를 추가해야합니다

.split-right img { 
    width: //100% or auto; 
} 

당신은 이미지의 width에 대한 100% 또는 auto 사이에서 선택을해야합니다. 100%을 선택하면 이미지가 부각되어 표시되고 auto을 선택하면 이미지의 일부만 표시됩니다.

.split-wrapper { 
    background-image: url(http://pagedev.co.uk/bowmite/test/images/electrical-bottom.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
} 

: 당신이 CSS를 사용하여 견고 있다면

는하지만, 당신이 할 수있는 일은 당신이 split-right DIV 내에서 이미지를 제거하고 대신이 같은 .split-wrapper 사업부에 background-image로 해당 이미지를 사용할 수 있다는 것입니다