與同一行中的另一列具有相同高度的響應圖像

我想將圖像放置到窗體的右側，並且我需要圖像與窗體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; 
}

這適用於更小的屏幕尺寸，但再次廢墟上更大屏幕尺寸的圖片。

來源

2017-02-07 kemosabe

嘗試使用它作爲背景圖像，像你一樣，但使用'background-size：cover;' –

這也行不通。它不扭曲圖像，但它裁剪。 – kemosabe

你試過：

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

另外，你有一個正在運行的網站？它可以幫助解決它。

來源

2017-02-07 01:20:35 ToluT

與同一行中的另一列具有相同高度的響應圖像

回答

相關問題