CSS Grid изображение и проблема с колонками в Chrome - PullRequest
Новая
       38

CSS Grid изображение и проблема с колонками в Chrome

0 голосов
/ 21 октября 2019

В Chrome мой сайт ломается на настольных и мобильных устройствах.

Проблемы:

  • Во втором разделе неправильно отображается изображение героя. На изображении должно быть две половины, которые при наведении соединяются вместе.

  • Изображения героев переходят в верхнюю часть страницы, и отображается только половина изображения.

    Когда я пошел проверять страницу, я увидел в консоли следующее:

[Устаревание] Процентное соотношение дорожек и желобов для контейнеров сетки неопределенной высоты будетбыть решенным против внутренней высоты вместо того, чтобы обрабатываться как автоматически и ноль соответственно

Я посмотрел на это и пришел к найти исправление для указанной проблемы было изменение процентов в grid-template-rows или grid-auto-rows до auto .

Я применил данное исправление, и проблема все еще сохраняется. Это только ломается в Google Chrome. Сайт отлично выглядит в Firefox.

enter image description here

enter image description here

Вот код.

HTML: 

        <section class="page">
          <div class="details">
            <h1>Skyline KPGC110</h1>
            <h2>1973</h2>
          </div>
          <div class="hero">
            <a href="./kenmeri.html">
              <img class="model-left" src="./images/front-1.png" alt="model">
              <img class="model-right" src="./images/front-2.png" alt="model">
            </a>
          </div>
        </section>

        <!-- ------------------------------ Seciton 2 ------------------------------ -->

        <section class="page about">
          <div class="details">
            <h1>Skyline PGC10</h1>
            <h2>1969</h2>
          </div>
          <div class="hero">
            <a href="./pgc10.html">
              <img class="model-left" src="./images/gtr-left.png" alt="chef">
              <img class="model-right" src="./images/gtr-right.png" alt="chef">
            </a>
          </div>
        </section>

        <!-- ------------------------------ Section 3 ------------------------------ -->

        <section class="page reel">
          <div class="details">
            <h1>Fairlady 240z</h1>
            <h2>1973</h2>
          </div>
          <div class="hero">
            <a href="./fairladyz.html">
              <img class="model-left" src="./images/240z-left.jpg" alt="model">
              <img class="model-right" src="./images/240z-right.jpg" alt="model">
            </a>
          </div>
        </section>

Вид рабочего стола: 

.page {
  display: grid;
  grid-template-columns: 5% 1fr 1fr 1fr 5%;
  min-height: 90vh;
}

.about,
.reel {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

.hero {
  display: flex;  /*  gets rid of gap between imgs */
  align-self: center;
  justify-self: center;
  height: 500px;
  overflow: hidden;
}
.hero a {
  display: flex; /* removes seperation created by a tag */
}

.hero img {
  height: 500px;
  transition: transform 0.3s ease-out;
  cursor: pointer;
}

Точка останова 1 (для ноутбука): 

@media screen and (max-width: 1024px) {
  .page {
    grid-template-columns: 5% 1fr 5%;
    grid-template-rows: 2fr 1fr;
    align-items: center;
  }

  .hero {
    height: auto;
    grid-column: 2;
  }

  .hero img {
    height: 425px;
  }
}

Точка останова 2 (для мобильного телефона): 

@media screen and (max-width: 768px) {
  .page {
    grid-template-rows: 1fr;
  }

  .page-1 h3 {
    font-size:  1.125rem;
    padding-right: 20px;
  }

  .hero img {
    width: auto;
  }

  .details h2 {
    font-size: 28px;
  }
}

ссылка на репо - здесь , если вы хотите получить полный обзор кода.

1 Ответ

0 голосов
/ 21 октября 2019

В вашем коде 

img {
   display: block;
   width: 100%; 
   height: 100%;
}

просто удалите ширину: 100%, и она будет работать нормально.

...