Отзывчивое изменение размера изображения в соответствии с текстом-div рядом с ним

Question

Im, создающий веб-сайт с двумя цветами, который должен подбирать фотографии рядом с текстовыми полями. Изображения должны быть изменены в соответствии с текстовыми div, так что они все время охватывают 50% ширины каждый, а высота определяется div, содержащим текст. (Например, предположим, что вытягивание окна на меньшую ширину, текст будет заполняться больше по высоте, и изображение должно будет заполнить ту же самую высоту и по-прежнему сосредоточиться в контейнере и сохранить его соотношение сторон.) Возможно ли это использование только HTML и CSS, и если да, то как?

Answer 1

Можно сочетать решение таблицы с фоновым размером: крышка; решение.

Демо: https://jsfiddle.net/64gzjah4/2/

CSS:

td { 
    border: 1px solid red; 
    width: 50%; 
} 
td:first-child { 
    background-image: url('http://placekitten.com/g/200/300'); 
    background-repeat: no-repeat; 
    background-size: cover; /* Make the image cover the td */ 
    background-position: 50% /* Center the image inside the td */ 
} 

HTML:

<table> 
    <tr> 
     <td> 
     </td> 
     <td> 
      Text goes here 
     </td> 
    </tr> 
</table> 

Какой браузер поддержку вам нужно? IE8 не поддерживает свойство background-size, но свойство идеально подходит для того, что вам нужно, поэтому, надеюсь, вам не нужна поддержка IE8;) http://caniuse.com/#feat=background-img-opts

Answer 2

Вы можете использовать flexbox для этого (если я понимаю, чего вы хотите достичь правильно :)).

См демо на https://jsfiddle.net/64gzjah4/1/

CSS:

.container { 
    display: flex; 
    flex-direction: row; 
    align-items: stretch; /* Align height */ 
} 
.item { 
    border: 1px solid red; 
    width: 50%; 
} 
.item:first-child { 
    background-image: url('http://placekitten.com/g/200/300'); 
    background-repeat: no-repeat; 
    background-size: cover; /* Make the image cover the div */ 
    background-position: 50% /* Center the image inside the div */ 
} 

HTML:

<div class="container"> 
    <div class="item"> 
    </div> 
    <div class="item"> 
     Text goes here 
    </div> 
</div> 

Однако поддержка браузера для Flexbox не так хорошо, так это зависит от требования к браузеру. Поддержку браузера для Flexbox (а также руководство по Flexbox) можно увидеть на https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Решения 1 является использование ответа предоставленного Хайди Selmer Nielsen, однако, как упоминалось Flexboxes не предлагают большую поддержку и они не охватывайте сценарий, который вы упоминали полностью в своем вопросе.

изображения будет заполнить ту же высоту, и по-прежнему сосредоточено в контейнере и держать его коэффициент пропорциональности

Решения 2 является использование таблиц (я знаю, я сказал, что это правильно, ТАБЛИЦЫ ?!) Они не выполняют именно то, что вы хотите, но вы сохраните пропорции изображения, однако вы не можете контролировать высоту с помощью текстовой ячейки.

http://jsfiddle.net/cved0fwh/

<table> 
<tr> 
    <td class="img"><img src="http://data3.whicdn.com/images/20161286/large.jpg" /></td> 
    <td class="txt">Odd Future Intelligentsia gentrify, Thundercats McSweeney's meh kitsch narwhal leggings. Gastropub pop-up twee drinking vinegar. Lomo Blue Bottle meditation, migas VHS listicle leggings. XOXO bitters ethical actually. Fap kitsch Intelligentsia, locavore chia Bushwick roof party ennui four loko skateboard messenger bag art party mixtape iPhone taxidermy. Chillwave artisan put a bird on it Blue Bottle cred. Forage tilde tote bag vinyl listicle skateboard Austin deep v chambray church-key. Odd Future Intelligentsia gentrify, Thundercats McSweeney's meh kitsch narwhal leggings. Gastropub pop-up twee drinking vinegar. Lomo Blue Bottle meditation, migas VHS listicle leggings. XOXO bitters ethical actually. Fap kitsch Intelligentsia, locavore chia Bushwick roof party ennui four loko skateboard messenger bag art party mixtape iPhone taxidermy. Chillwave artisan put a bird on it Blue Bottle cred. Forage tilde tote bag vinyl listicle skateboard Austin deep v chambray church-key.</td> 
</tr> 

tr{ 
    border:1px solid red; 
} 
td { 
    width:50%; 
    height:auto; 
} 
img{ 
    width:100%; 
    height:auto; 
} 

Решение 3

И единственный способ для достижения эффекта, который вы ищете, чтобы использовать язык, на стороне клиента скриптовый Javascript ,

http://jsbin.com/xuputulodu/edit?js,output

Я просто бросил вместе быстрое и грязное доказательство концепции для вас:

$(document).ready(function(){ 

    function imageSize(){ 
    var a = $('img').height(); 
    var b = $('.text').height(); 

    if (a > b){ 
     $('img').height(b).width('auto').css('margin-top', 0); 
    } else if (b > a){ 
     $('img').width('100%').height('auto').css('margin-top', (b-a)/2); 
    } 
    } 

    $(window).resize(function(){ 
    imageSize();  
    }); 

});