Как изменить размер изображения на веб-сайте Hugo и изменить его положение в зависимости от размера экрана и размера окна? - PullRequest
Новая
       50

Как изменить размер изображения на веб-сайте Hugo и изменить его положение в зависимости от размера экрана и размера окна?

0 голосов
/ 11 июля 2019

У нас есть веб-сайт , созданный с помощью статического генератора сайтов Hugo.Как вы можете видеть, это изображение (одно с 4 прямоугольниками) накладывается поверх фона.В зависимости от вашего экрана это изображение может быть в правильном положении или над текстом «Моделирование зданий и энергии, Оптимизация и суррогатное моделирование».

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

Я искал ответ неделями.Я перепробовал все возможные ответы на SO.Пробовал media queries, использовал vw и vh единицы, использовал %, чтобы указать заполнение, но я не могу заставить его работать.

Я использую тему агентства Хьюго.Вот заголовок HTML: 

<!-- Header -->
    <header>
        <div class="overlay"></div>
      <div class="container">
          <div class="intro-text">
            <div class="intro-heading">{{ .Site.Title }}</div>
            <div class="intro-lead-in">{{ .Site.Params.subtitle }}</div>

          </div>

      </div>
    </header>

, а вот CSS (версия в текущей сборке) для изображения div: 

@media {
header .overlay:before {
      content: url("../img/portfolio/besos-left.png");
      position:absolute;
      top: 43.9%;
      left: 33.8%;
      z-index: 2;
  }
}

Я попытался установить position: relative, но этополностью изменил положение изображения.Это пошло в начало страницы.

...