У меня есть 2 изображения на фоне контейнера и на переднем плане. Как сделать изображение переднего плана отзывчивым? - PullRequest
Новая
       1

У меня есть 2 изображения на фоне контейнера и на переднем плане. Как сделать изображение переднего плана отзывчивым?

0 голосов
/ 23 октября 2019

У меня 2 изображения. 1 Я установил в фоновом режиме, а другой показывает выше, что фоновое изображение, является отзывчивым, но изображение переднего плана идет неправильно, когда я перетащить браузер в маленький. Ссылка на сайт ниже. https://padovasitiweb.it/test-page/

Я приложил код. Я поместил изображение переднего плана на .title_container: перед ним показывается идеальный, но не отзывчивый. 

        .title_container:before {
background: url(https://padovasitiweb.it/wp-content/uploads/main-cover_fgg.png) no-repeat center center / cover;
content: '';
top: auto;
position: absolute;
bottom: 7px;
height: 360px;
width: 100%;
left: 0px;
z-index: 5;
text-align: center;
}
.title_container h1.entry-title{
margin-top: 7vw;
margin-bottom: 7vw;
}
@media only screen and (max-width: 767px){
.title_container h1.entry-title, .title_container .entry-title a {
font-size: 8vw !important;
letter-spacing: -1px;
color: #333333!important;
top: 4px;

}
.title_container:before{
    height: 107px!important;    
    bottom: 2px !important;
}

}

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

1 Ответ

0 голосов
/ 23 октября 2019

Проблема вызывает cover размер фона. CSS-свойство cover является наиболее подходящим стилем и не соответствует ширине родительского элемента. Вместо этого вы можете использовать проценты, например background-size: 100% auto;, который будет масштабироваться до ширины родительского элемента с 100% и сохранять его соотношение сторон с auto.

Я также изменил положение с фиксированных единиц на процентыпоэтому он остается в нужном месте.

Единственные изменения, которые я сделал, касались стилей в свойстве .container h1.entry-title:before CSS. 

.container h1.entry-title:before {
    background: url(https://padovasitiweb.it/wp-content/uploads/main-cover_fgg.png) no-repeat center bottom;
    background-size: 100% auto;
    content: '';
    position: absolute;
    top: auto;
    bottom: 1.5%;
    left: 50.6%;
    transform: translateX(-50%);
    height: 100%;
    width: 100%;
    z-index: 5;
    text-align: center;
    display: block;
}

РЕДАКТИРОВАТЬ Я думаю, что вывнес изменения в HTML, пока я смотрел на него. Когда я посмотрел на HTML, элемент :before был прямым потомком элемента с классами stretch_full container_wrap alternate_color light_bg_color title_container.

. Если вы оставите HTML-код таким, какой он есть сейчас, вам также потребуется выполнить следующееИзменения CSS:

1) Применить position:static к родительскому элементу :before с классами main-title entry-title

2) Применить position:static к родительскому элементу main-title entry-titleэлемент с классом container

3) Применить position:relative к родителю элемента container с классами stretch_full container_wrap alternate_color light_bg_color title_container

PS Добро пожаловать в stackoverflow:)

...