根据 window 大小更改图像 CSS（响应式设计）

Question

我的响应式设计可以工作，因此图像会根据 window 的大小而变化，但是，我无法更改个人 CSS class es。例如，我想在 class="logo-tablet-home" 上添加 5% 的 padding-top，但在 class="logo-desktop-home" 上我想添加一个黑色背景和 10% 的 padding-top。我曾尝试通过在 CSS 中使用他们各自的 classes 来做到这一点，但它对两者都没有影响。

    <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%; 
  }
}

根据 window 大小更改图像 CSS（响应式设计）

Changing CSS of image depending on window size (responsive design)

html

css

responsive-design