时间戳

首页 > 解决方案 > 根据窗口大小更改图像的 CSS（响应式设计）

html - 根据窗口大小更改图像的 CSS（响应式设计）

问题描述

我已经有了响应式设计，因此图像会根据窗口的大小而变化，但是，我无法更改各个类的 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>

标签： htmlcssresponsive-design

解决方案

如果您想响应地更改元素，则需要将 CSS 媒体查询添加到您的 CSS。

该source标签没有任何类属性。你需要像这样把它放在你的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%; 
  }
}

推荐阅读