Блог

У меня есть изображение или иногда видео внутри коробки с рамкой вокруг. Потому что я не могу гарантировать, что соотношение сторон всегда будет 1:1, которое я установил object-fit cover .

На некоторых экранах граница не отображается с одной стороны (см. Мой скриншот). Когда я перемещаю окно с экрана 1920х1080 на iMac 5k, граница там есть. Единственный способ, которым я могу объяснить это сам, — это то, что граница находится «между» двумя пикселями на экране меньшего размера, и проблема возникает не так часто, если экран имеет более высокое разрешение.

Когда я удаляю object-fit: cover; границу, она отображается правильно, тогда искажается только соотношение сторон моего изображения.

Что я могу сделать, чтобы это исправить? Если нет другого способа, я мог бы также использовать для этого jQuery или JS, но я предпочитаю решение CSS.

Также здесь есть некоторый код, но я не могу воссоздать проблему с ним. Но это единственное, что происходит на моем сайте.

 html,
body {
  margin: 0;
}

.wrapper {
  width: 945px;
  height: 945px;
}

.inner_wrapper {
  margin: 15px;
  padding: 0;
  border: 1px solid #000;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
}

img {
  width: 50%;
  height: 50%;
  margin: 25%;
  border: 1px solid #000;
  object-fit: cover;
} 

 <div class="wrapper">
  <div class="inner_wrapper">
    <img src="https://via.placeholder.com/2000">
  </div>
</div> 

Редактировать:
Я только что заметил, что это происходит только тогда, когда размер моего изображения заканчивается на .5, поэтому, например, если 50% приводит к ширине 455,5 пикселей, одна сторона обрезается. Есть ли способ автоматически округлить вверх или вниз, но при этом использовать 50%?