Блог

Я новичок в медиа-запросах. Я настроил его для замены изображения в зависимости от размера портала. Это отлично работает со следующим кодом:

     <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

Для меня лучший способ центрировать любой объект — это:

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

В вашем случае поместите это в свой контейнер div и удалите ширину.

Внутри вашего изображения поместите тег ширины.

Я хочу добавить, что вы делаете два http запроса, как для большого, так и для маленького логотипов, когда вам действительно нужен только один. Рассматривали ли вы возможность использования picture ?

<picture> Элемент HTML содержит ноль или более <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>