引导3：以造型为中心的响应式图像

我试图将一个样式化的响应式图像居中，但它似乎不起作用。在逐个删除类之后，我发现我的类“portimage”似乎打破了响应。引导3：以造型为中心的响应式图像

我不希望图像大于700px，我希望它们在它们周围有一个浅色边框。

下面的代码：

<div class="row mtmini"> 
     <div class="col-lg-12"> 
      <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch1-Home.jpg"> 
      <br> 
      <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch2-Menu.jpg"> 
      <br> 
      <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch3-CC.jpg"> 
     </div> 
</div>

下面是类 “portimage” 的CSS：

.portimage { 
max-width: 700px; 
border:1px solid lightgray; 
}

很抱歉，如果这是一个愚蠢的问题 - 刚刚起步。我试图寻找这个，但我没有找到一个解决方案，除了居中和响应之外，解决图像造型的问题。提前致谢！

来源

2016-08-31 Sarah T.

要将图像居中，请在父元素上添加“text-align：center”。同时结合'max-width：700px'和'width：100％'将使图像与容器一样宽，但不超过700px。 – pol

以中心块为中心。在我的电脑它正在工作 –

它应该工作正常，请仔细检查您的CSS链接是否正确插入引导程序。另外，如果你使用gulp/grunt等构建工具，请尝试重新启动监视任务。

另外，是'mtmini'类添加任何样式到'行'div？

来源

2016-08-31 18:10:53

引导3：以造型为中心的响应式图像

回答

相关问题