根據 window 大小（響應式設計）更改圖像的 CSS

Question

我已經讓響應式設計工作，因此圖像會根據 window 的大小而變化，但是，我無法更改各個類的 CSS。 例如，我想在 class="logo-tablet-home" 上添加 5% 的 padding-top，但在 class="logo-desktop-home" 上，我想添加黑色背景和 10 的 padding-top %。 我曾嘗試通過在 CSS 中使用他們各自的類來做到這一點，但這對任何一個都沒有影響。

    <picture>
      <source class="logo-mobile-home" srcset="Images/passive-logo-mobile.png" media="(max-width: 600px)">
      <source class="logo-tablet-home" srcset="Images/passive-logo-mobile2.png" media="(max-width: 900px)">
      <source class="logo-desktop-home" srcset="Images/passive-logo-desktop.png" media="(min-width: 900px)">
      <img src="Images/header_images.png" alt="needed" style="width:auto;">
    </picture>

Answer 1

如果要響應地更改元素，則需要將 CSS 媒體查詢添加到 CSS。

source標簽沒有任何 class 屬性。 您需要將其放在您的img標簽上，如下所示： <img class="logo-mobile-home logo-tablet-home logo-desktop-home" src="Images/header_images.png" alt="needed" style="width:auto;">

您的 css 與媒體查詢應該是：

/* For mobile phones: */
.logo-mobile-home {
  background:none;
  padding-top:0;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .logo-tablet-home {
    background:none;
    padding-top:5%;
  }
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .logo-desktop-home {
    background:#000;
    padding-top:10%; 
  }
}