与同一行中的另一列高度相同的响应图像
与同一行中的另一列高度相同的响应图像
提问于 2017-02-07 09:09:04
我试图把一个图像放在窗体的右边，我需要图像的高度与窗体div相同。我真的很难在不扭曲图像的情况下做到这一点。
我使用的图像是1920X1200。
我得到的代码如下：
<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;
}这适用于较小的屏幕尺寸，但同样会破坏较大屏幕尺寸的图像。
回答 1
Stack Overflow用户
发布于 2017-02-07 09:20:35
您是否尝试过：
.price-results {
background-image: url(/wp-content/images/fourHeros.jpeg) no-repeat;
background-size: 335px auto;
background-position: top;
}另外，你有一个运行的网站吗？它可以帮助弄清楚这一点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42080004
复制相关文章
相似问题
腾讯云开发者
