在引导中并排设置图像并响应

我已经写了一个代码，其中4个图像并排保存在div内。在引导中并排设置图像并响应

下面是代码：

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image2.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive" /> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image3.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image4.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image5.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/> 
      </div> 
     </div> 
</div>

这看起来像这样的全尺寸窗口：

enter image description here

现在窗口大小最小化时，图像看起来是这样的：

enter image description here

我希望图像看起来像全尺寸的样子，即使最小化后图像不被拉伸。

我能够得到上述图像的视图没有它拉伸时，我删除了样式：宽度：100％;高度：70％;但随后在全尺寸窗口中，图像彼此之间留有空白。

请帮我把这个排序。

来源

2017-02-15 James Fernandes

你尝试'高度：汽车;'？ – Ben

这个@James好运吗？我的方法是否适用于您当前的设置？ –

@FredRocha嘿弗雷德，我试图只使用img-reponsive和丢失内联样式，但随后图像看起来像这样在全屏窗口大小：（检查下面） –

-2

也许加入img-responsive class to image will fix the problem。

来源

2017-02-15 13:24:18 user218046

他们已经在那里 – Banzay

对不起，我还没有看到它。 – user218046

使用

class="img-responsive"

会让你的图片在不同设备响应。具体而言，并按照Bootstrap's documentation，这将增加

max-width: 100%; 
height: auto; 
display: block;

你的图像元素。

您需要将失去你的内联样式

style="width:100%; height:70%;"

，因为他们高于一切（普罗蒂普：不使用它们）。

最后，如果您不需要图像之间的空格，您需要强制删除每列的填充。例如：

div.col-xs-3 { 
    padding: 0; 
}

Here是一个示例codepen。

来源

2017-02-15 15:04:56

@FredRocha嘿弗雷德，我试着只用IMG-reponsive &失去了内嵌样式，但随后的图像进行全屏窗口大小看起来像这样：

enter image description here

来源

2017-02-17 07:39:11

而不是增加一个新的答案编辑你原来的问题，你进步，@詹姆斯。 ;） –

在引导中并排设置图像并响应

回答

相关问题