Изображение полной высоты в ответном Div split 50%

Question

У меня есть div, разделенный на 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> 

Мой КСС:

.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 ДИВ имеет высоту 393px со всем текстом внутри него, в том числе границ и выше JQuery код присваивает эту высоту изображению. Это будет работать, даже если вы измените длину текста внутри div split-left.

Во-вторых, вам нужно будет добавить следующий CSS в таблице стилей:

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

Вам нужно будет выбрать между 100% или auto для width изображения. Если вы выберете 100%, изображение станет сжатым, и если вы выберете auto, будет видно только небольшая часть изображения.

Но если вы непреклонны на использовании CSS, что вы можете сделать то, что вы можете удалить изображение из внутри split-right DIV и вместо того, чтобы использовать это изображение в качестве background-image на .split-wrapper DIV, например так:

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