css - 调整图像大小以适应 col-xs

Question

我正在尝试调整图像大小以适应这些参数，但如果我使用 img-responsive 它太小了？我只需要它是固定大小或尽可能调整到屏幕分辨率？

<div class="container-fluid f2p-nav hidden-sm hidden-md hidden-lg">
<div class="row">
  <div class="col-xs-4"></div>
  <div class="col-xs-4"><img class="image-container-center img-responsive" src="images/f2p6.png" alt="Chania"></div>
  <div class="col-xs-4"></div>
</div>
</div>

CSS 是:

.image-container-center {
  margin-top:27px;
  display: flex;
  justify-content: center;
}

Fiddle

Answer 1

我认为您不需要调整图像大小来适应 Bootstrap 中的特定列，您只需要在设置图像大小时使用单位百分比，例如宽度、高度、最大宽度或最小宽度宽度。这是以下代码。希望对您有所帮助。

<div class="col-xs-4"><img class="image-container-center img-responsive" src="images/f2p6.png" alt="Chania" style="width: 100%; height: 100%"></div>