使图像适合容器

我试图使用引导网格系统的每个行都有4列包含图像，但图像大小很大，它获取其容器，所以我设置图像位置：绝对和div位置：相对但它仍然无法正常工作。有没有办法让图像适合容器尺寸的div容器？使图像适合容器

HTML：

<div class="container"> 
     <div class="row"> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f1.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f2.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f3.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f4.jpg" alt="f1"> 
      </div> 
    </div> 
<div>

CSS：

.sec5row { 
     border : 1px solid red; 
     position: relative; 
    } 
    .filter { 
     position: absolute; 
    }

来源

2016-07-12 pexichdu

只需使用IMG {宽度：100％} –

IMG {最大宽度：100％;}可能会工作。或者甚至可能是img {width：100％;}，如果你想要100％的时候。 – RMo

或者甚至可以更好地添加引导类img响应图像（假设您使用基于创建列的方式引导）。 – RMo

添加CSS的代码

#img { 
    width: 100px;//change px size 
    height: 100px;//change px size 
    padding-left: 3px; 
    padding-top: 5px; 
}

来源

2016-07-12 07:51:38 Ranjan

为什么#img ??对于img标签 –

没有ID做一个简单的id =“”它它不会影响任何东西。 – Ranjan

或使用类如“.filter” – Ranjan

您可以使用下面的代码以适应响应格内图像

.filter { 
    width:100%;/*To occupy image full width of the container and also fit inside the container*/ 
    max-width:100%/*To fit inside the container alone with natural size of the image ,Use either of these width or max-width based on your need*/ 
    height:auto; 
    }

来源

2016-07-12 07:52:49 bubesh

你能告诉我为什么身高：auto？对不起，我很新。 – pexichdu

@pexichdu为了保持基于宽度的图像的纵横比，否则图像看起来会拉长，因为我们已经将宽度设为100％ – bubesh

我认为引导类“.img-responsive”解决了你的问题。因此，尝试这样的事情：

<div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f1.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f2.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f3.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f4.jpg" alt="f1"> 
 
      </div> 
 
    </div> 
 
<div>

它设置你的图像的风格 “最大宽度：100％;”和“height：auto;”这应该正是你所需要的。应该不需要任何额外的CSS。

来源

2016-07-12 07:55:21 Jabalaja

只需添加类= “IMG响应” 到你的img标签...它工作正常

来源

2016-07-20 10:49:06

使图像适合容器

回答

相关问题