Question

我需要使用bootstrap响应以下背景图像。

<div class="col-md-6">
    <img src="images\4.jpg">
</div>

我怎样才能让图像响应？

Answer 1

Bootstrap中有一个响应式图像：'img-fluid'。它将占用其容器的所有宽度。

<div class="col-md-6">
 <img class="img-fluid" src="images\4.jpg">
</div>

参考：Bootstrap-4 responsive image

Answer 2

您可以使用class="img-responsive"使图片响应

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-md-6">
 <img src="http://theworldly.co.uk/wp-content/uploads/2017/01/tech-wowcity.jpg" class="img-responsive">
 </div>

＆＃13;

Answer 3

您可以使用自适应背景图像解决方案https://jsfiddle.net/tekx21t9/1/

.bg {
  background-image: url("http://via.placeholder.com/350x15");
  height: 100px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  
  <div class="row">
    
    <div class="col-md-6 bg">
       <!--<img src="http://via.placeholder.com/350x150" class="img-responsive" />-->
     </div>
    
  </div>
  
</div>

如果您希望图像标记在那里而不是背景图像，则下面是解决方案

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  
  <div class="row">
    
    <div class="col-md-6">
       <img src="http://via.placeholder.com/350x150" class="img-responsive" />
     </div>
    
  </div>
  
</div>

如何使用bootstrap背景图像进行响应式设计

3 个答案: