底部引导程序中带有文本的响应图像

Question

我在使用CSS调整响应式图像下方的文本时遇到问题。请看下面的图片。

infra是图片，基础设施下面的文字就是文字。

<div class="row">
  <div class="col-md-15 ">

    <a href="https://test.sharepoint.com/sites/SitePages/Home.aspx"> <img src="https://test.sharepoint.com/sites/SiteAssets/Icons/FM&A.png" class="img-responsive" alt="Image"></a>
    <p style="color: #5081D9;">Infrastructure</p>

  </div>

我正在使用bootstrap使图像响应“img-responsive”类。我如何相应地调整下面的文字。

请参阅我的CSS

 .col-xs-15,
        .col-sm-15,
        .col-md-15,
        .col-lg-15 {
            position: relative;
            min-height: 1px;
            padding-right: 10px;
            padding-left: 10px;
        }

        .col-xs-15 {
            width: 20%;
            float: left;
        }

        @media (min-width: 768px) {
            .col-sm-15 {
                width: 20%;
                float: left;
            }
        }

        @media (min-width: 300px) {
            .col-md-15 {
                width: 20%;
                float: left;
            }

Answer 1

图片网址不随代码提供。但是有一种方法可以做到类似的事情。首先，你需要给图像宽度：100％;所以图像自动达到父容器的宽度。例如：

 .col-xs-15 img,
        .col-sm-15 img,
        .col-md-15 img,
        .col-lg-15 img {
            width:100%;
        }

现在您可以使用css属性对齐文本：text-align：center; 示例：

 .col-xs-15 p,
            .col-sm-15 p,
            .col-md-15 p,
            .col-lg-15 p {
                text-align:center;
            }

这将根据父容器动态调整文本。

但有更好的方法。为此部分指定一个新类。例如：

  <div class="row">
  <div class="col-md-15 img-box">

    <a href="https://test.sharepoint.com/sites/SitePages/Home.aspx"> <img src="https://test.sharepoint.com/sites/SiteAssets/Icons/FM&A.png" class="img-responsive" alt="Image"></a>
    <p style="color: #5081D9;">Infrastructure</p>

  </div>
</div>

因此，在添加新课程后，您可以使用以下css：

.img-box img{
       width:100%;

}
.img-box p {
    text-align:center;
}