Отзывчивое изображение с той же высотой, что и другой столбец в той же строке

Question

Я пытаюсь разместить изображение справа от формы, и мне нужно, чтобы изображение было одинаковой высоты, как форма div. У меня очень трудное время для этого, не искажая изображение.

Изображение я использую 1920 X 1200.

код, который я получил, это выглядит следующим образом:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-4 govx-form"> 
      <div class="form-background"> 
       <?php echo do_shortcode(); ?> 
       <?php echo do_shortcode(); ?> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-8 govx-form price-results" id="ap_pricing_results"> 
      <img src="wp-content/images/fourHeroesLarger_edit.jpg" alt="" class="img-responsive"> 
     </div> 
    </div> 
</div> 

У меня есть, конечно, пытался использовать CSS, что делает высоту соответствовать высота формы, но как только я это сделаю, она разрушает отзывчивость изображения. Кроме того, когда я устанавливаю высоту, я устанавливаю ширину на 100%, чтобы заполнить div, но это искажает изображение очень плохо.

Я также попытался сделать фоновое изображение со следующими стилями CSS:

.price-results { 
    background-image: url(/wp-content/images/fourHeros.jpeg); 
    background-repeat: no-repeat; 
    background-size: 335px; 
    background-position: top; 
    height: 130px; 
} 

Это работает на меньшие размеров экрана, но снова губит изображение на больших размерах экрана.

Answer 1

Вы пробовали:

.price-results { 
background-image: url(/wp-content/images/fourHeros.jpeg) no-repeat; 
background-size: 335px auto; 
background-position: top; 
} 

Кроме того, у вас есть веб-сайт работает? Это может помочь в выяснении этого.