html - 与同一行中另一列高度相同的响应图像

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

此外，您有正在运行的网站吗？它可以帮助解决问题。