宽度为 x VW 的元素似乎对 window 调整大小没有反应

Question

我在一个 table 中有两个 div，每个应该占用 50% 的宽度，加起来就是浏览器的整个宽度 window，为此我决定使用 VW，特别是 50vw ，但是在调整 window 大小时，div 没有响应...我该如何解决？

#market_and_industry_research_section{
    width: 100vw;
    height: 59vw;
    padding: 0;
    margin: 0;
}

market_and_industry_research_section_table{
    width: 100vw;
    height: 59vw;
    margin: 0;
    padding: 0;
}

#market_and_industry_research_section_description{
    width: 50vw;
    height: 59vw;
    background-color: blue;
    margin: 0;
}

#market_and_industry_research_section_files{
    width: 50vw;
    height: 59vw;
    background-color: red;
    margin: 0;
}

<table id="market_and_industry_research_section_table">
       <tr>
           <td id="market_and_industry_research_section_description">
               <div>
                   <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
                   <div></div>
                   <p>Market and industry research</p>
               </div>

           </td>
           <td id="market_and_industry_research_section_files">
               <div>
                   <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
                   <div></div>
                   <p>Market and industry research</p>
               </div>
           </td>
       </tr>
   </table>

请看这个 GIF

https://imgur.com/a/QuKhRgm

Answer 1

这是由您的 img 标签引起的。我在下方添加了 CSS 定位所有 img 标签，但您可以随意将其更改为 class 或 ID 定位。基本上，当您调整大小时图像的大小不会改变，但是将它们设置为 max-width: 100%; height: auto; 将允许调整所有内容。

#market_and_industry_research_section {
  width: 100vw;
  height: 59vw;
  padding: 0;
  margin: 0;
}

market_and_industry_research_section_table {
  width: 100vw;
  height: 59vw;
  margin: 0;
  padding: 0;
}

#market_and_industry_research_section_description {
  width: 50vw;
  height: 59vw;
  background-color: blue;
  margin: 0;
}

#market_and_industry_research_section_files {
  width: 50vw;
  height: 59vw;
  background-color: red;
  margin: 0;
}

/* Added CSS */
img {
 max-width: 100%;
 height: auto;
}

<table id="market_and_industry_research_section_table">
  <tr>
    <td id="market_and_industry_research_section_description">
      <div>
        <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
        <div></div>
        <p>Market and industry research</p>
      </div>

    </td>
    <td id="market_and_industry_research_section_files">
      <div>
        <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
        <div></div>
        <p>Market and industry research</p>
      </div>
    </td>
  </tr>
</table>

宽度为 x VW 的元素似乎对 window 调整大小没有反应

Element with a width of x VW does not appear to react to window resize

css

responsive-design