При изменении ширины фона он также меняет положение контейнера - PullRequest
Новая
       45

При изменении ширины фона он также меняет положение контейнера

0 голосов
/ 01 августа 2020

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

Пока не будет проблем.

Теперь мне нужно изменить ширину фонового изображения, потому что Я должен оставить левое пространство на первом изображении и правое пространство на втором изображении.

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

Когда нет места

enter image description here

Please check the below image. When there is a space

image 

.bodywrapper {
  margin-top: 40px;
}

.container {
  position: relative;
  height: 100%;
}

.bannerBg {
  height: 350px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 30px;
  width: 92%;
}

.wrapperOne {
  background-image: url('https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg');
}

.wrapperTwo {
  background-image: url('https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg');
}

.box {
  background-color: red;
  height: 220px;
  width: 320px;
  position: absolute;
  bottom: 0
}

.rightside {
  right: 0;
}

.leftside {
  left: 0;
}
<div class="bodywrapper">

  <div class="wrapperOne bannerBg ml-auto">
    <div class="container">
      <div class="box rightside"></div>
    </div>
  </div>

  <div class="wrapperTwo bannerBg mr-auto">
    <div class="container">
      <div class="box leftside"></div>
    </div>
  </div>

</div>

v>

Мне нужно знать, возможно это или нет.

1 Ответ

0 голосов
/ 01 августа 2020

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

.bodywrapper {
  margin-top: 40px;
  text-align: right;
}

.container {
  position: relative;
  height: 100%;
  width: 70%;
  display: inline-block;
}

.bannerBg {
  height: 350px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 30px;
  width: 100%;
}

.wrapperOne {
  background-image: url('https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg');
  text-align: center;
  background-size: 70% 100%;
  background-position: right;
  display: inline-block;
}

.wrapperTwo {
  background-image: url('https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg');
  text-align: center;
  background-size: 70% 100%;
  background-position: left;
  display: inline-block;
}

.box {
  background-color: red;
  height: 220px;
  width: 320px;
  position: absolute;
  bottom: 0
}

.rightside {
  right: 0;
}

.leftside {
  left: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="menu.css">
</head>
<body>
  <div class="bodywrapper">

    <div class="wrapperOne bannerBg ml-auto">
      <div class="container">
        <div class="box rightside"></div>
      </div>
    </div>

    <div class="wrapperTwo bannerBg mr-auto">
      <div class="container">
        <div class="box leftside"></div>
      </div>
    </div>

  </div>
</body>
</html>

Основная часть - это добавление приведенного ниже кода в 2 wrapper

text-align: center;
background-size: 70% 100%;
background-position: right; //in wrapper one and  left in wrapper two
display: inline-block;

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...