Как исправить изображение bg, которое не покрывает всю страницу в мобильной версии?

Question

Я хочу установить изображение bg для одной из страниц моего веб-сайта, созданной с помощью Wordpress, но в мобильной версии оно сохраняет свое нормальное соотношение сторон. Вот страница сайта http://zm.jcreator.eu/

css:

.entry-content #fit {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}

The code snippet in the page editor:

<img id="fit" src="http://zm.jcreator.eu/wp- 
content/uploads/2019/03/home_1.jpg" alt="">

Answer 1

Есть как минимум два способа приблизиться к нему.

1) Расположите ваше изображение абсолютно внутри контейнера.

<div class="entry-content">
  <div class="img-wrapper">
   <img id="fit" src="..." alt/>
  </div>
</div>

Если мы предположим, что вы хотите, чтобы ваше изображение занимало 100% ширины и высоты браузера, тогда ваш css должен выглядеть следующим образом (обратите внимание, что я игнорирую entry-content, потому что я не совсем уверен, что остальная часть контента будет в новом div или нет - это кажется очень неясным в вашем примере).

.img-wrapper {
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}


.img-wrapper img {
    position:absolute;
    top:50%
    left:50%;
    transform:translate(-50%,-50%);
}

Уловка этого подхода - он будет хорошо работать только для определенных сценариев, определяемых соотношением сторон изображения. Можно обойти это путем использования фрагмента JavaScript, который можно связать при загрузке и изменении размера документа. Затем вы можете использовать следующий JavaScript для расчета наилучшего размера изображения для определенного сценария:

function checkImg() {
    var img = document.getElementById('fit'));
    var section = document.getElementsByClassName('entry-content')[0];
    var imgheight = img.offsetHeight;
    var sectionheight = section.offsetHeight;
    var imgwidth = img.offsetWidth;
    var sectionwidth = section.offsetWidth;

        var imgRatio = imgheight / imgwidth;
        var scrRatio = sectionheight / sectionwidth;

        if (scrRatio > imgRatio) {
            var finalHeight = sectionheight;
            var scale = finalHeight / imgheight;
            var finalWidth = imgwidth * scale;
        } else {
            var finalWidth = sectionwidth;
            var scale = finalWidth / imgwidth;
            var finalHeight = imgheight * scale;
        }
        img.style.height = finalHeight + 'px';
        img.style.width = finalWidth + 'px';
    }
}

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

В то же время, если вы не активируете его при изменении размера, ширина и высота изображения не изменятся.

2) Используйте свойства фона css. Как указал ArtisticPhoenix, вы не можете использовать свойства фона для тега изображения. Однако вы можете установить изображение в качестве фона для элемента. Тогда вы можете использовать следующее:

<div class="entry-content">
  <div class="img-wrapper">
  </div>
</div>

Обратите внимание, что вы не собираетесь помещать изображение сюда с тегом img, но вместо этого вам нужно будет указать источник для свойства background-image в вашем CSS следующим образом:

.img-wrapper {
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-image:url('http://zm.jcreator.eu/wp-content/uploads/2019/03/home_1.jpg');
}

Поскольку вы используете WordPress, вам, вероятно, хотелось бы использовать изображение, которое вы выбрали в CMS. В этом случае вам просто нужно указать background-image со встроенными стилями:

<div class="entry-content">
  <div class="img-wrapper" style="background-image:url('<?php echo your_php_function_to_get_img_url(); ?>')">
  </div>
</div>