在響應Div分裂50％全高度圖像

Question

我有一個文本和圖像之間分割50％的股利。我希望右邊的圖像始終與文字高度相同，今天早上我一直在關注很多帖子，但似乎無法使其發揮作用。

您可以看到頁面在這裏的一個例子： http://pagedev.co.uk/bowmite/test/electrical.html

我覺得我幾乎那裏，你可以看到橙色背景，顯示div的基地。像正好需要適應下來這和溢出需要的地方......

我的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/
（確保你調整它的大小）

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 DIV有393px與它裏面的所有文字，包括邊框的高度，和上述的jQuery代碼將該高度分配給圖像。即使您更改了split-left div中的文本長度，這也可以工作。

其次，您需要將下面的CSS添加到您的樣式表：

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

您需要對圖像的width100%或auto之間做出選擇。如果您選擇100%，圖像將顯示爲壓扁狀態，如果您選擇auto，則只有一小部分圖像可見。

但是，如果你在使用CSS是堅定的，你可以做的是，你可以從split-right DIV中刪除圖像，並改用的圖像作爲.split-wrapper DIV一個background-image這樣的：

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