Блог

Я получаю какое-то странное поведение, выравнивающее изображения в пределах границы в Chrome (версия 93.0.4531.2) и Edge (версия 91.0.864.37) на рабочем столе (Windows 10 20H2, macOS Big Sur 11.3.1). Это не проблема на мобильных устройствах.

Пожалуйста, обратитесь к изображениям, чтобы увидеть небольшие пробелы. Это очень темпераментно, так как на некоторых картах они появляются с левой стороны, на других сверху, на некоторых с обеих сторон, а на других вообще нет.

До сих пор я пробовал (в различных вариантах):

• margin: 0
• padding: 0
• display: block
• vertical-align: bottom
• vertical-align: top
• vertical align: -webkit-baseline-middle

Мой зум установлен на 100%. Вот код для моей последней попытки. Я использую Vuejs для этого проекта.

шаблон vue:

 <div class="card">
  <img v-if="image" :src="image" :alt="name" />
</div>
 

база.scss

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 

компонент scss:

 .card {
  width: 240px;
  margin-bottom: 25px;
  img {
    width: 240px;
    height: 240px;
    vertical-align: -webkit-baseline-middle;
    object-fit: cover;
    border: 1.5px solid black;
  }
}
 

Смотрите поведение в прямом эфире здесь: https://www.sableradio.live/shows. Любая помощь будет очень признательна, заранее спасибо.

вы можете решить эту проблему, просто удалив число с плавающей точкой из свойства css границы, как это для reff. прикрепление скриншота изображения

  .card {
  width: 240px;
  margin-bottom: 25px;
  img {
    width: 240px;
    height: 240px;
    vertical-align: -webkit-baseline-middle;
    object-fit: cover;
    border: 1px solid black;
  }
}