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

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

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

1 个答案: