寬度為xVW的元素似乎對視窗調整大小沒有反應-有解無憂

我在一個表中有兩個 div，每個應該占據 50% 的寬度，加起來是瀏覽器視窗的整個寬度，為此我決定使用 VW，特別是 50vw，但是在調整視窗大小時，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

uj5u.com熱心網友回復：

這是由您的img標簽引起的。我在下面添加了針對所有img標簽的 CSS，但可以隨意將其更改為類或 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/478184.html

標籤：css 响应式设计

上一篇：無法使用httpDart包對AzureDevOpsRestAPI進行身份驗證

下一篇：隨著Safari中輸入文本的變化，輸入型別文本下方的div上下移動