Изображение, скрытое CSS, видно Маяком с неправильным соотношением сторон - PullRequest
Новая
       46

Изображение, скрытое CSS, видно Маяком с неправильным соотношением сторон

0 голосов
/ 01 мая 2020

Привет и спасибо за чтение!

У меня есть два изображения на моем веб-сайте в процессе разработки, и я хочу показать их оба для больших окон просмотра, но только одно из них на мобильных устройствах. Я использую Bootstrap 4, и у меня есть класс 'd-none d-sm-block' на div для изображения, которое нужно скрыть, и это работает. Я доволен этим.

Однако, когда я выполняю аудит Lighthouse, оценка Best Practices уменьшается, потому что это скрытое изображение видно Lighthouse и имеет неправильное соотношение сторон. Это действительно беспокоит меня!

Вы можете увидеть основные c изображения и страницу здесь .

Стили и html: 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<style>
.container {
  width: 100%;
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 36rem) {
  .container {
    max-width: 33.75rem;
  }
}

@media (min-width: 48rem) {
  .container {
    max-width: 70rem;
  }
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.9375rem;
  margin-left: -0.9375rem;
}

col-12, .col-sm-6 {
  position: relative;
  width: 100%;
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 36rem) {
  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.d-none {
  display: none !important;
}

@media (min-width: 36rem) {
   .d-sm-block {
    display: block !important;
  }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12 col-sm-6">
            <img src="images/gift-voucher-banner-slim-right.jpg" width="100%">
        </div>
        <div class="col-sm-6 d-none d-sm-block">
            <img src="images/birds-of-prey-banner.jpg" width="100%"></div>
</div>
</div>
</body>
</html>

Маяк сообщает об этом:

Результат передовой практики

Есть ли что-то, что я делаю неправильно? Или есть способ решить это? Любая помощь приветствуется, так как она сбивает счет со 100 до 93, но только для мобильных. Спасибо!

...