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

Posted 2023-03-06

技术标签:

【中文标题】如何让我的图片标题具有响应性？【英文标题】：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"  >
          <figcaption id="pic1">Island</figcaption>
      </fig>

      <fig>
        <div class="gallery2">
          <img id="Pic2" src="./assets/images/d2.jpg"  >
          <figcaption id="pic2">Track & Field</figcaption>
        </div>
      </fig>

      <fig>
        <div class="gallery3">
          <img id="Pic3" src="./assets/images/d3.jpg"  >
          <figcaption id="pic3">Bambi</figcaption>
        </div>
      </fig>

      <fig>
        <div class="gallery4">
          <img id="Pic4" src="./assets/images/d4.jpg"  >
          <figcaption id="pic4">City Scape</figcaption>
        </div>
      </fig>

      <fig>
        <div class="gallery5">
          <img id="Pic5" src="./assets/images/d5.jpg"  >
          <figcaption id="pic5">"Art"</figcaption>
        </div>
      </fig>


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

【问题讨论】：

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

<div class="gallery1">
<fig>
<img id="picture1" src="./assets/images/download.jpg"  
>
<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"  
>
    <figcaption id="pic1">Island</figcaption> 
   </fig>
  </div>


  <div class="gallery2">
   <fig>
    <img id="Pic2" src="./assets/images/d2.jpg"  >
    <figcaption id="pic2">Track & Field</figcaption> 
   </fig>
  </div>


  <div class="gallery3">
   <fig>
    <img id="Pic3" src="./assets/images/d3.jpg"  >
    <figcaption id="pic3">Bambi</figcaption>
   </fig>
  </div>   



  <div class="gallery4">
   <fig>
    <img id="Pic4" src="./assets/images/d4.jpg"  >
    <figcaption id="pic4">City Scape</figcaption>    
   </fig>
  </div>

  <div class="gallery5">
   <fig>
    <img id="Pic5" src="./assets/images/d5.jpg"  >
     <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>

【讨论】：

以上是关于如何让我的图片标题具有响应性？的主要内容，如果未能解决你的问题，请参考以下文章

如何让我的整个网站在移动设备上响应？

如何使当前的网站具有响应性？ [关闭]

使用 Bootstrap 使徽标图像具有响应性

如何使此图像地图元素具有响应性？

响应式图片伸缩库

添加 SVG 元素并使其具有响应性