Question

我有一个带图像的图像容器。大小为317x242px。我将image-container放在col-md-3 div中。引导程序的宽度稍微大一点，不完全是317px，但它没有问题，因为我使用background-size:cover来填充整个div。

如果宽度小于/高于317px？

，如何保持尺寸

http://www.bootply.com/6waABmJhuL

Answer 1

希望这有帮助！

我创建了一些类并使用占位符来让您了解结果。

<div class="container">
  <div class="row">
    <div class="col-md-3">
        <div class="image-container">
          <img src="http://www.placehold.it/317x242">
        </div>
    </div>
    <div class="col-md-3">
        <div class="image-container">
         <img src="http://www.placehold.it/317x242">
        </div>
    </div>
    <div class="col-md-3">
        <div class="image-container">
          <img src="http://www.placehold.it/317x242">
        </div>
    </div>
    </div>
</div>


/* CSS used here will be applied after bootstrap.css */
.col-md-3{
  width:30%;
  }
.image-container {
    background:red;
    border: 2px solid red;      
}

img{ width: 100%;
}

Booty of Original code

Answer 2

我没有重新使用background-size:cover来放大图像，因为质量会下降，您可以清楚地看到差异，特别是在移动视图上。

解决问题的最佳方法是使用尺寸更大的图像。例如，如果您的图像是317x242px并且块（col-md-3）达到400px，则最好使用宽度比块大2倍的图像，对于这种情况800px（视网膜视图）。

所以，不要调整大于实际尺寸的图片，因为它不是一个好的解决方案。

Answer 3

我找到了解决方案。

我添加了填充顶部：76.34％为我的div。现在它保持了维度。

（242/317）* 100 = 76.34。

Answer 4

你可以使用class =＆＃34; img-responsive＆＃34;到标签，它会自动处理你给它的任何图像。

在bootstrap 3中创建div响应宽度/高度

4 个答案: