Responsive Bild mit der gleichen Höhe wie eine andere Spalte in der gleichen Zeile

Question

Ich versuche, ein Bild auf der rechten Seite eines Formulars zu platzieren, und ich brauche das Bild auf die gleiche Höhe wie die Form div. Es fällt mir wirklich schwer, das zu erreichen, ohne das Bild zu verzerren.

Das Bild, das ich bin mit 1920 x 1200.

Der Code, den ich habe habe, ist wie folgt:

<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> 

habe ich natürlich versucht, CSS zu verwenden, die die Höhe übereinstimmen macht die Höhe der Form, aber sobald ich das tue, ruiniert es die Reaktionsfähigkeit des Bildes. Wenn ich eine Höhe einstelle, setze ich außerdem die Breite auf 100%, um das div zu füllen, aber das verzerrt das Bild wirklich schlecht.

Ich habe auch versucht, ein Hintergrundbild mit den folgenden CSS-Stilen zu tun:

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

Diese kleineren Bildschirmgrößen auf arbeitet aber wieder ruiniert das Bild auf größere Bildschirmgrößen.

Answer 1

Haben Sie versucht:

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

Außerdem haben Sie eine laufende Website? Es kann helfen, es herauszufinden.