如何让我的图片标题具有响应性？答案

【问题标题】：How do I get my picture captions to be responsive?如何让我的图片标题具有响应性？
【发布时间】：2020-01-07 11:41:19
【问题描述】：

我试图让我的字幕在调整屏幕宽度时响应。我发现我的图片的一列（左侧）有一个标题，但第二列的标题没有，并且位于第一列的下方，除非我专门定位它们（然后它们没有响应）。如何让我的标题在调整大小时和其他情况下都贴在相应的图片上？

我已将图像的位置设置为相对位置，而 figcaption 设置为绝对位置。我已经尝试定位封装图片和标题的 div，移除浮动等。

img {
  padding-top: 15px;
  float: left;
  padding-right: 15px;
  position: relative;
}

#pic2 {
  background-color: #4aaaa5;
  ;
  text-align: center;
  position: absolute;
  top: 297px;
  z-index: 1;
  padding: 15px 110px;
  color: white;
}

#pic1 {
  background-color: #4aaaa5;
  ;
  text-align: center;
  position: absolute;
  top: 297px;
  z-index: 1;
  padding: 15px 135px;
  color: white;
}

#pic3 {
  background-color: #4aaaa5;
  ;
  text-align: center;
  position: absolute;
  top: 463px;
  z-index: 1;
  padding: 15px 133px;
  color: white;
}

#pic4 {
  background-color: #4aaaa5;
  ;
  text-align: center;
  position: absolute;
  top: 463px;
  left: 534px;
  z-index: 1;
  padding: 15px 120px;
  color: white;
}

#pic5 {
  background-color: #4aaaa5;
  text-align: center;
  position: absolute;
  top: 627px;
  padding: 15px 137.5px;
  color: white;
}

<body>
  <div class="wrapper">
    <h1 class="header1">Portfolio</h1>
    <div class="wrapper2">

      <fig>
        <div class="gallery1">
          <img id="Pic1" src="./assets/images/download.jpg" height="150px" width="33.3%">
          <figcaption id="pic1">Island</figcaption>
      </fig>

      <fig>
        <div class="gallery2">
          <img id="Pic2" src="./assets/images/d2.jpg" height="150px" width="33.3%">
          <figcaption id="pic2">Track & Field</figcaption>
        </div>
      </fig>

      <fig>
        <div class="gallery3">
          <img id="Pic3" src="./assets/images/d3.jpg" height="150px" width="33.3%">
          <figcaption id="pic3">Bambi</figcaption>
        </div>
      </fig>

      <fig>
        <div class="gallery4">
          <img id="Pic4" src="./assets/images/d4.jpg" height="150px" width="33.3%">
          <figcaption id="pic4">City Scape</figcaption>
        </div>
      </fig>

      <fig>
        <div class="gallery5">
          <img id="Pic5" src="./assets/images/d5.jpg" height="150px" width="33.3%">
          <figcaption id="pic5">"Art"</figcaption>
        </div>
      </fig>


      </div>
    </div>
  </div>

【问题讨论】：

欢迎来到 StackOverflow！请花一些时间正确格式化您的代码。此外，您的代码有很多错误，请尝试使用在线代码验证器之一，然后发布您的代码。最后但同样重要的是，请注意您可以使用stack snippets

标签： html css image responsive caption

【解决方案1】：

<div class="gallery1">
<fig>
<img id="picture1" src="./assets/images/download.jpg" height="150px" 
width="33.3%">
<figcaption id="pic1">Island</figcaption> 
</fig>
</div>

正确的编码 ^^ 同样在“43”行有一个额外的</div> 标签。

您可能需要重新编码。我猜这是一个家庭作业项目。

HTML 我会帮助你，但CSS 由你自己决定。

HTML

<div class="container">
 <div class="wrapper">
  <h1 class="header1">Portfolio</h1>
 </div>
 <div class="wrapper2">
  <div class="gallery1">
   <fig>
    <img id="Pic1" src="./assets/images/download.jpg" height="150px" 
width="33.3%">
    <figcaption id="pic1">Island</figcaption> 
   </fig>
  </div>


  <div class="gallery2">
   <fig>
    <img id="Pic2" src="./assets/images/d2.jpg" height="150px" width="33.3%">
    <figcaption id="pic2">Track & Field</figcaption> 
   </fig>
  </div>


  <div class="gallery3">
   <fig>
    <img id="Pic3" src="./assets/images/d3.jpg" height="150px" width="33.3%">
    <figcaption id="pic3">Bambi</figcaption>
   </fig>
  </div>   



  <div class="gallery4">
   <fig>
    <img id="Pic4" src="./assets/images/d4.jpg" height="150px" width="33.3%">
    <figcaption id="pic4">City Scape</figcaption>    
   </fig>
  </div>

  <div class="gallery5">
   <fig>
    <img id="Pic5" src="./assets/images/d5.jpg" height="150px" width="33.3%">
     <figcaption id= "pic5">"Art"</figcaption> 
    </fig>
   </div>


  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用此代码

body {
            margin: 0;
            padding: 0;
        } 
        .header1 {
            text-align: center;
            font-size: 60px;
        }
        ul {
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }
        ul li {
            margin: 0;
            padding: 0;
            list-style: none;
            display: inline-block;
        }      
        ul li img {
            margin: 0;
            padding: 0;
            width: 100%;
        }               
        #pic1, #pic2, #pic3, #pic4, #pic5 {
            background-color: #4aaaa5;
            text-align: center;
            padding: 15px 135px;
            color: white;
        }
        .gallery1,.gallery2,.gallery3,.gallery4,.gallery5, {
            width: 19%;
            float: left;
            display: inline-block;
        }

    <div class="wrapper">
        <h1 class="header1">Portfolio</h1>
        <div class="wrapper2">
            <ul>
                <li>
                    <div class="gallery1">
                        <img id="Pic1" src="https://www.w3schools.com/images/picture.jpg">
                        <figcaption id="pic1">Island</figcaption>
                    </div>
                </li>
                <li>
                    <div class="gallery2">
                        <img id="Pic2" src="https://www.w3schools.com/images/picture.jpg">
                        <figcaption id="pic2">Track & Field</figcaption>
                    </div>
                </li>
                <li>
                    <div class="gallery3">
                        <img id="Pic3" src="https://www.w3schools.com/images/picture.jpg">
                        <figcaption id="pic3">Bambi</figcaption>
                    </div>
                </li>
                <li>
                    <div class="gallery4">
                        <img id="Pic4" src="https://www.w3schools.com/images/picture.jpg">
                        <figcaption id="pic4">City Scape</figcaption>
                    </div>
                </li>
                <li>
                    <div class="gallery5">
                        <img id="Pic5" src="https://www.w3schools.com/images/picture.jpg">
                        <figcaption id="pic5">"Art"</figcaption>
                    </div>
                </li>
            </ul>
        </div>
    </div>

【讨论】：