Использование медиа-запросов для обмена изображениями и их центрирования - PullRequest
Новая
       11

Использование медиа-запросов для обмена изображениями и их центрирования

0 голосов
/ 10 марта 2019

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

    <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/

Ответы [ 2 ]

2 голосов
/ 10 марта 2019

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

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

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

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

0 голосов
/ 10 марта 2019

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

Элемент HTML <picture> содержит ноль или более элементов <source> и один <img> элемент для предоставления версий изображения для разных сценарии отображения / устройства. Браузер рассмотрит каждого ребенка <source> элемент и выберите лучший из них; если нет совпадений найдены, URL атрибута <img> элемента *1011* выбран. Выбранное изображение затем отображается в пространстве, занимаемом <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>
...