响应式图像 - Bootstrap

Question

我正在使用bootstrap框架,我希望有3个图像,如下面的jsfiddle链接所示,当窗口大小更改/监视器大小太小而无法显示完整大小的图像时,在响应庄园中执行操作.重要的是图像保持在同一条线上(如果可能),两者之间没有间距.

<img src="http://via.placeholder.com/660x160.png"><img src="http://via.placeholder.com/350x160.png"><img src="http://via.placeholder.com/350x160.png">

谢谢

https://jsfiddle.net/mztyoy7q/

Answer 1

在图像标签中添加一个类,不要忘记添加引导程序!只要确保你链接bootstrap,你就可以使用这个免费的CDN:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

并添加该类

class="img-responsive"

到你的img标签.

的jsfiddle

编辑:如果你想在同一行上的图像,只需创建几个div.首先,创建一个父div

<div style="display:inline-block; width:100%; height:auto; background-color:#ff0000;">
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>

此div元素将为红色,宽度为100%,并自动调整高度.然后在每个图像之间添加div,float:left;如下所示:

<div style="display:inline-block; width:100%; height:auto;background-color:#ff0000;">
  <div style="float:left;">
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png">
  </div>
  <div style="float:left;">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
  </div>
  <div style="float:left;">
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png">
  </div>
</div>

这是更新的JSFiddle如果有效,请告诉我!