адаптация изображений под трансляции на телевизоре

Question

Есть рабочий сайт, куда грузятся html-файлы с картинками с сетевой папки. html простые, типа:

<html>

<body>
  <center>
    <img src="motiv.jpg">
  </center>
</body>

</html>

jpg файлы - это скриншоты Excel таблиц. Как адаптировать их, чтобы они были на весь экран, не вылезали и не обрезались. Добавлял в img width=100%. Не очень помогает. 2 таблицы отображаются хорошо, остальные нехорошо.

Answer 1

вариант с object-fit: contain; позволит изображению масштабироваться по ширине экрана и не обрезаться.

Также можно попробовать object-fit: cover; — он заполнит весь экран, но может немного обрезать края.

Если вокруг картинки остаются поля, можно задать background-color в цвет таблицы, чтобы всё выглядело аккуратнее.

html,
body {
  background-color: red;
}

img {
  width: 100vw; /*так будет 100% ширины экрана*/
  height: 100vh;
  object-fit: contain;
  background-color: black;
  display: block;
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">

</head>

<body>
  <img src="https://dummyimage.com/1593x329/000/fff.png&text=1593x329">
</body>

</html>

<meta name="viewport" content="width=device-width, initial-scale=1.0"> также я бы добавила метатег - Эта строка сообщает браузеру устройства (в том числе телевизора), как нужно рассчитывать видимую область страницы — viewport

width=device-width ширина страницы = реальной ширине экрана
initial-scale=1.0 задаёт начальный масштаб 1:1

❗тег <center> - Устарело: эта функция больше не рекомендуется к использованию.

БЛОГ НА HUSL

адаптация изображений под трансляции на телевизоре

Ответы (1 шт):