Question

我是媒体查询的新手。我将其设置为根据门户的大小交换图像。使用以下代码，效果很好：

    <header>
      <div class="logo_div">
        <img src="images/logo_full.png" class="logo_full">
        <img src="images/logo_small.png" class="logo_small">
      </div>
    </header>

    /* Logo DIV */
    .logo_div {
      margin: auto;
      width: 50%;
    }

    /* Logo */
    .logo_small {
      display: none;
    }

    @media (min-width: 1200px) {
      .logo_full {
        display: block;
        text-align: center;
      }

      .logo_small {
        display: none;
      }
    }

我的大徽标居中就可以了。但是，我的小徽标位于右侧。我已经通过简单地更改浏览器窗口大小以及在我的iPhone XSM上进行了测试。在我的手机上，很明显，小徽标在最右边。

我在这里想念东西吗？

您也可以转到http://thelavender.net/_fades/

来观看此直播

Answer 1

对我来说，使任何对象居中的最佳方法是：

#myobjectid{
   display:table;
   margin:0 auto;
}

在您的情况下，将其放入div容器，然后删除宽度。

在图像内，放置宽度标签。

Answer 2

我想补充一点，当您只需要一个徽标时，无论大小徽标，您都需要两个http请求。您是否考虑过使用picture？

HTML <picture>元素包含零个或多个<source>元素，并且一个<img>元素以提供不同图像的版本显示/设备方案。浏览器将考虑每个孩子 <source>元素并在其中选择最佳匹配；如果没有匹配找到URL元素的<img>属性的src。然后，选定的图像将显示在由 <img>元素。

下面的这段代码一次只会产生一个徽标，并且会大大缩小您的CSS。

<picture>
  <source srcset="logo_full.png" media="(min-width: 1200px)" />
  <source srcset="logo_small.png" />
  <img srcset="logo_full.png" alt="My default image" />
</picture>

使用媒体查询交换图像并将其居中

2 个答案: