与同一行中的另一列具有相同高度的响应图像

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

另外，你有一个正在运行的网站吗？它可以帮助你弄清楚。