Центрирование изображения больше, чем окно браузера, которое затем можно использовать в качестве ролловера

Я должен начать с того, что я относительно новичок в подобных HTML/CSS. У меня есть изображение размером 2880x540, и я хочу установить его в качестве целевой страницы для веб-сайта. Это означает, что мне нужно, чтобы изображение было центрировано так, чтобы лишняя ширина удалялась из окна браузера без полосы прокрутки (избыточное разрешение существует для подобных мониторов с более высоким разрешением). Я планирую использовать две области изображения в качестве ролловеров для двух других изображений, которые имеют одинаковые пропорции.

На данный момент мой код очень прост:

    <!DOCTYPE html>
  <head>
  </head>
  <body>
  <img src="sitewide.png" width="2880" height="540"  alt=""/>
  </body>
</html>

Любая обратная связь с благодарностью.

Источник

1 ответ

Вы можете установить свое изображение как центрированный фон div:

<!DOCTYPE html>
  <head>
    <style>
      body{
        overflow-x: hidden;
      }
      #bigImage{
        background:url('sitewide.png') no-repeat top center;
        width: 2880px;
        height: 540px;
      }
    </style>
  </head>
  <body>
    <div id="bigImage"></div>
  </body>
</html>
Источник
Другие вопросы по тегам