如何根据图像响应宽度

Question

自从我一周前开始学习这些东西以来，我是html5 / css3和bootstrap世界的新手。

我的问题是我希望文本宽度（显示文本的区域宽度）与响应图像的宽度相对应。 当页面处于lg / md / sm响应模式时，文本在图像下正确显示“宽度”，但在xs响应模式下，文本显示不正确。

我想要的图像：

http://imgur.com/F2Y4afD

你建议的解决方案的图像（链接有图像，用键盘的键切换！）（问题仍然存在！）：

http://imgur.com/tYKixk5,g9EkoM4#1

以下是HTML代码：

<div class="container">
  <div class="page-header" id="p-h-1">
    <h1>Latest News</h1>
  </div>
  <div class="row">
    <div class="col xm-12 col-sm-4">
      <figure>
        <img src="images/prova.jpg" class="img-responsive center-block" /></figure>
        <h3 class="text-center">Prova</h3>
        <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="col xm-12 col-sm-4">
      <figure><img src="images/prova.jpg" class="img-responsive center-block" /></figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="col xm-12 col-sm-4">
      <figure><img src="images/prova.jpg" class="img-responsive center-block" /></figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
  </div>
</div>

任何想法的人？

抱歉我的英文不好，这不是我的母语，如果我的问题一遍又一遍地被回答，我很抱歉，但我不知道要搜索哪些关键字......

我发现这个解决方案适合我（我仍然需要知道图像大小，以便为

元素添加固定宽度：

<div class="container">
  <div class="page-header" id="p-h-1">
    <h1>Latest News</h1>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <figure>
        <img src="images/prova.jpg" class="img-responsive center-block" /></figure>
        <h3 class="text-center">Prova</h3>
        <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-12 col-sm-4">
      <figure><img src="images/prova.jpg" class="img-responsive center-block" /></figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-12 col-sm-4">
      <figure><img src="images/prova.jpg" class="img-responsive center-block" /></figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="clearfix visible-xs-block"></div>
  </div>
</div>

这里是css：

@media (max-width: 767px) {
  p {
    text-align: center;
    border: solid black 1px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    /* Based on figure width */
    width: 430px;
  }
}

Answer 1

我认为我看到网格管理中的错误是用col xm-12写的，而不是类bootstrap3而不是＆＃39; with-xs-as`

prova con queste classi

<div class="container">
  <div class="page-header" id="p-h-1">
    <h1>Latest News</h1>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <figure>
        <img src="images/prova.jpg" class="img-responsive center-block" /></figure>
        <h3 class="text-center">Prova</h3>
        <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="col-xs-12 col-sm-4">
      <figure><img src="images/prova.jpg" class="img-responsive center-block" /></figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="col-xs-12 col-sm-4">
      <figure><img src="images/prova.jpg" class="img-responsive center-block" /></figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
  </div>
</div>

Answer 2

您可以将网格更改为col-xs-6并使用col-xs-offset-3

应用偏移量

<强>输出：

＆＃13;

＆＃13;

@media (max-width: 767px) {
  p {
    text-align: center;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="page-header" id="p-h-1">
    <h1>Latest News</h1>
  </div>
  <div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-sm-offset-0 col-sm-4">
      <figure>
        <img src="http://placehold.it/300x300" class="img-responsive center-block" />
      </figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous
        tourist attraction in Norway.</p>
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-offset-0 col-sm-4">
      <figure>
        <img src="http://placehold.it/300x300" class="img-responsive center-block" />
      </figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous
        tourist attraction in Norway.</p>
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-offset-0 col-sm-4">
      <figure>
        <img src="http://placehold.it/300x300" class="img-responsive center-block" />
      </figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous
        tourist attraction in Norway.</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;