图像在浏览器中无法正确缩放？

Question

我遇到了一个小问题。我正在设计一个 3 列区域，其中包含每个图像的图像和文本。缩放网站时，图像不会沿直线反弹，文本不会保持图像边缘 - 仅在左侧。

这似乎是一个简单的解决方法，但我在过去的两个小时里一直在搞乱 CSS 元素，但我似乎无法找出问题所在。

我可能应该注意到，这种“响应能力”只能通过 HTML 和 CSS 的百分比来实现。

任何帮助将不胜感激！

我当前的 CSS：

#popularprebuilt {
  padding: 0;
  margin: 0;
}

#popularprebuilt .title {
  text-align: center;
  padding: 46px 0 40px 0;
}

#popularprebuilt .precolumn {
  float: left;
  width: 33%;
  text-align: inherit;
  padding: 0 20px 20px 0;
}

#popularprebuilt .precolumn_b {
  float: inherit;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  padding: 0 0 46px 0;
}

#popularprebuilt .precolumn .pretitle {
  float: left;
  width: 33%;
  text-align: justify;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: capitalize;
}

#popularprebuilt .precolumn .preprice {
  float: right;
  text-align: justify;
  font-size: 12px;
  letter-spacing: 0;
}

我当前的 HTML：

<section id="popularprebuilt">
  <div class="container">
    <div class="title">
      <h1>Popular Prebuilt Packages</h1>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">low line glow</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">sunshine</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">top heavy</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">simply flat</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">forty-five</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">right aligned</p>
      <p class="preprice">$9.99</p>
    </div>

    <!--Popular Prebuilt Packages Buttons-->
    <div class="precolumn_b">
      <button class="button_2"><span>Browse all grpahics</span </button>
      <button class="button_3"><span>I want a custom design</span </button>
    </div>
  </div>
</section>

示例：

#popularprebuilt {
  padding: 0;
  margin: 0;
}

#popularprebuilt .title {
  text-align: center;
  padding: 46px 0 40px 0;
}

#popularprebuilt .precolumn {
  float: left;
  width: 33%;
  text-align: inherit;
  padding: 0 20px 20px 0;
}

#popularprebuilt .precolumn_b {
  float: inherit;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  padding: 0 0 46px 0;
}

#popularprebuilt .precolumn .pretitle {
  float: left;
  width: 33%;
  text-align: justify;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: capitalize;
}

#popularprebuilt .precolumn .preprice {
  float: right;
  text-align: justify;
  font-size: 12px;
  letter-spacing: 0;
}

<section id="popularprebuilt">
  <div class="container">
    <div class="title">
      <h1>Popular Prebuilt Packages</h1>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">low line glow</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">sunshine</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">top heavy</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">simply flat</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">forty-five</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">right aligned</p>
      <p class="preprice">$9.99</p>
    </div>

    <!--Popular Prebuilt Packages Buttons-->
    <div class="precolumn_b">
      <button class="button_2"><span>Browse all grpahics</span </button>
      <button class="button_3"><span>I want a custom design</span </button>
    </div>
  </div>
</section>

Answer 1

首先要做的事情：

媒体查询： 尝试在断点中使用媒体查询

图像：将图像宽度设置为其父容器的 100%，而不是固定宽度。

填充：您应该计算容器的填充和边距。在您的代码中，您将容器除以三，但您有 20px 的填充重叠。

这是您修改后的代码：

CSS：

#popularprebuilt {
        padding: 0;
        margin: 0;
}

#popularprebuilt .title {
        text-align: center;
        padding: 46px 0 40px 0;
}

#popularprebuilt .precolumn {
        float: left;
        width: 29.3333%;
        text-align: inherit;
        padding:0 2%;

}

#popularprebuilt .precolumn img{
    width:100%;
}
  #popularprebuilt .precolumn_b {
        float: inherit;
        width: auto;
        text-align: center;
        text-transform: uppercase;
        padding: 0 0 46px 0;
  }

  #popularprebuilt .precolumn .pretitle {
        float: left;

        text-align: justify;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: capitalize;
  }

  #popularprebuilt .precolumn .preprice {
        float: right;
        text-align: justify;
        font-size: 12px;
        letter-spacing: 0;
  }

 @media all and (max-width:1000px){
#popularprebuilt .precolumn {
        float: left;
        width: 46%;
        text-align: inherit;
        padding:0 2%;

    }

}

 @media all and (max-width:600px){
#popularprebuilt .precolumn {
        float: left;
        width: 96%;
        text-align: inherit;
        padding:0 2%;

    }

}

HTML：

  <section id="popularprebuilt">
   <div class="container">
    <div class="title">
          <h1>Popular Prebuilt Packages</h1>
    </div>
    <div class="precolumn">
          <a href="">
                <img src="https://via.placeholder.com/350x150" />
          </a>
          <p class="pretitle">low line glow</p>
          <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
          <a href="">                                    
               <img src="https://via.placeholder.com/350x150" />
          </a>
          <p class="pretitle">sunshine</p>
          <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
          <a href="">                                    
               <img src="https://via.placeholder.com/350x150" />
          </a>
          <p class="pretitle">top heavy</p>
          <p class="preprice">$9.99</p>
    </div>

     <div class="precolumn">
          <a href="">                                    
               <img src="https://via.placeholder.com/350x150" />
          </a>
          <p class="pretitle">forty-five</p>
          <p class="preprice">$9.99</p>
     </div>


   <!--Popular Prebuilt Packages Buttons-->
    <div class="precolumn_b">
        <button class="button_2"><span>Browse all grpahics</span> 
  </button>
        <button class="button_3"><span>I want a custom design</span> 
  </button>
    </div>
   </div>
   </section>

Check this JsFiddle.。这是一部完整的作品。

希望对您有所帮助。

Answer 2

为了让你的图像在你的父 div 变小时自动调整大小，你需要在你的

中添加以下内容

img{
  max-width:100%;
  height:auto;
}

说明：

通过使用max-width:100%，您是在告诉所有图像在您的父 div 的基础上拉伸 100%，但不会拉伸得比原始图像本身更大。随着宽度的拉伸，您将需要height:auto 自动调整自身，以便您的图像按比例调整大小而不是挤压......

示例：

img{
  max-width:100%;
  height:auto;
}

#popularprebuilt {
        padding: 0;
        margin: 0;
}

#popularprebuilt .title {
        text-align: center;
        padding: 46px 0 40px 0;
}

#popularprebuilt .precolumn {
        float: left;
        width: 33%;
        text-align: inherit;
        padding: 0 20px 20px 0;
  }

  #popularprebuilt .precolumn_b {
        float: inherit;
        width: auto;
        text-align: center;
        text-transform: uppercase;
        padding: 0 0 46px 0;
  }

  #popularprebuilt .precolumn .pretitle {
        float: left;
        width: 33%;
        text-align: justify;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: capitalize;
  }

  #popularprebuilt .precolumn .preprice {
        float: right;
        text-align: justify;
        font-size: 12px;
        letter-spacing: 0;
  }

<section id="popularprebuilt">
  <div class="container">
        <div class="title">
              <h1>Popular Prebuilt Packages</h1>
        </div>
        <div class="precolumn">
              <a href="">
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
              <p class="pretitle">low line glow</p>
              <p class="preprice">$9.99</p>
        </div>
        <div class="precolumn">
              <a href="">                                    
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
              <p class="pretitle">sunshine</p>
              <p class="preprice">$9.99</p>
        </div>
        <div class="precolumn">
              <a href="">                                    
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
              <p class="pretitle">top heavy</p>
              <p class="preprice">$9.99</p>
        </div>
        <div class="precolumn">
              <a href="">
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
              <p class="pretitle">simply flat</p>
              <p class="preprice">$9.99</p>
        </div>
        <div class="precolumn">
              <a href="">                                    
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
              <p class="pretitle">forty-five</p>
              <p class="preprice">$9.99</p>
        </div>
        <div class="precolumn">
              <a href="">                                    
                    <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
              </a>
                    <p class="pretitle">right aligned</p>
                    <p class="preprice">$9.99</p>
        </div>            

    <!--Popular Prebuilt Packages Buttons-->
        <div class="precolumn_b">
            <button class="button_2"><span>Browse all grpahics</span </button>
            <button class="button_3"><span>I want a custom design</span </button>
        </div>
    </div>
    </section>

---

补充：

上面的示例会遇到 div 无法正确左对齐并导致一侧空白的问题，这是因为每个 divelement 上的文本长度不同。要解决此问题，您可以参考以下解决方案。

HTML 修复：

将class="title"移到class="container"之外

发件人：

<div class="container">
   <div class="title">
       <h1>Popular Prebuilt Packages</h1>
    </div>
    .......
</div>

收件人：

<div class="title">
   <h1>Popular Prebuilt Packages</h1>
</div>
<div class="container">
    .......
</div>

CSS 修复：

#popularprebuilt .precolumn:nth-child(2n+1){
  clear:both;
}

说明：

您需要将class="title" 移开，以便您可以定位每 1、3、5、7 个.....元素。添加clear:both; 将强制 div 被清除并落在每个 div 的正下方。

示例：

img {
  max-width: 100%;
  height: auto;
}

#popularprebuilt .precolumn:nth-child(2n + 1) {
  clear: both;
}

#popularprebuilt {
  padding: 0;
  margin: 0;
}

#popularprebuilt .title {
  text-align: center;
  padding: 46px 0 40px 0;
}

#popularprebuilt .precolumn {
  float: left;
  width: 33%;
  text-align: inherit;
  padding: 0 20px 20px 0;
}

#popularprebuilt .precolumn_b {
  float: inherit;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  padding: 0 0 46px 0;
}

#popularprebuilt .precolumn .pretitle {
  float: left;
  width: 33%;
  text-align: justify;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: capitalize;
}

#popularprebuilt .precolumn .preprice {
  float: right;
  text-align: justify;
  font-size: 12px;
  letter-spacing: 0;
}

<section id="popularprebuilt">

  <div class="title">
    <h1>Popular Prebuilt Packages</h1>
  </div>

  <div class="container">

    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">low line glow</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">sunshine</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">top heavy</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">simply flat</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">forty-five</p>
      <p class="preprice">$9.99</p>
    </div>
    <div class="precolumn">
      <a href="">
        <img src="https://dummyimage.com/390x230/000/fff" height="230" width="390">
      </a>
      <p class="pretitle">right aligned</p>
      <p class="preprice">$9.99</p>
    </div>

    <!--Popular Prebuilt Packages Buttons-->
    <div class="precolumn_b">
      <button class="button_2"><span>Browse all grpahics</span </button>
      <button class="button_3"><span>I want a custom design</span </button>
    </div>
  </div>
</section>

Answer 3

我建议您在这篇文章中查看我的答案： How to Make Navigation Buttons Mobile-Responsive and Collapse in Order?

在那里我解释了为什么有时我们的代码在缩放或调整屏幕大小时不会像我预期的那样运行。

阅读我的回答后，您将能够理解并找出您编写的这段代码中的错误：

1) 对.precolumn 说它的宽度比里面的图片短，因为你说：<img src="./img/low-line-glow.jpg" height="230" width="390"> (width="390")

#popularprebuilt .precolumn .pretitle {
    float: left;
    width: 33%;
    text-align: justify;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: capitalize;
  }

如果你修复它，并学习如何在 CSS 中创建自然顺序，那么你将弄清楚如何在没有 CSS 的情况下制作很多东西“意外行为”

在你的情况下，即使你按照我的回答修复它也行不通，因为你还需要学习和使用display:flex; 来制作真正响应式的设计。