Question

我尝试使用Bootstrap连续显示5张图像。我目前的代码如下：

<div class="container">
  <div class="row text-center">
    <div class="col-sm-2" *ngFor="let smiley of agtContentService.smileys">
      <figure>
        <img src="{{smiley.image}}" width="150" height="150">
        <figcaption>{{smiley.name}}</figcaption>
      </figure>
    </div>
  </div>
</div>

目前的问题是，当显示图像时，它们不在屏幕中心。此外，它们不会根据屏幕尺寸进行拉伸/压缩。对于iOS，它根本没有响应。有人可以帮忙吗？我想要实现的目标如下：

显示5张图片及其标题，连续显示整个屏幕大小不重叠，并且它们之间有一些空格。
如果屏幕尺寸小得多（如移动电话），它们应该变小到指定的最小尺寸，之后，它们开始换行（例如，对于非常小的设备，将图像显示在一列中）。
需要在Android，iOS，Chrome，Safari和Firefox上工作。

请帮忙。感谢。

Answer 1

使用<img class="img-responsive"＆gt;

<div class="container">
  <div class="row text-center">
    <div class="col-sm-2" *ngFor="let smiley of agtContentService.smileys">
      <figure>
        <img class="img-responsive" src="{{smiley.image}}" width="150" height="150">
        <figcaption>{{smiley.name}}</figcaption>
      </figure>
    </div>
  </div>
</div>

Answer 2

您可以在样式表中使用以下代码并使用变量进行调整。

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 1em;
    padding: 1em;
  }

.col {
    flex: 1 0 150px;
    margin: 1em;
    min-width: 100px;
    padding: 1em;
  }

这是针对safari和ios的flexbox问题引导的一个解决方法。

您可以使用以下链接了解更多信息

https://getbootstrap.com/docs/4.0/layout/grid/

以下是一个工作示例

https://codepen.io/philipwalton/pen/RPMqjz

Answer 3

将以下css属性提供给图像标记。

.col-sm-2 img{
width: 100%;
height: auto;
}

你可以在这里找到我的例子。 https://jsfiddle.net/sree296/DTcHh/39349/

连续显示5张图片（自适应）

3 个答案: