Есть ли альтернативный способ размещения изображений на странице в определенном месте с разным разрешением - PullRequest
Новая
       38

Есть ли альтернативный способ размещения изображений на странице в определенном месте с разным разрешением

1 голос
/ 26 апреля 2019

Здесь я пытаюсь добавить 2 изображения в раздел, одно выровнено по центру, а второе расположено рядом с 1-м изображением, но я получаю проблему в разных разрешениях для 2-го изображения с помощью приведенного ниже кода, есть ли альтернативный способ быть последовательным в позиционировании резолюций? Обратитесь к изображению. 

    main.uni-design {
  background-image: url("../images/ban2.jpg");
  max-height: 1000px;
  max-width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
}

img.mob {
  position: absolute;
  bottom: -23px;
  right: 0%;
}

@media only screen and (min-width: 768px) {
  img.mob {
    position: absolute;
    bottom: -23px;
    right: 7%;
  }
}

@media only screen and (min-width: 992px) {
  img.mob {
    position: absolute;
    bottom: -23px;
    right: 16%;
  }
}

@media only screen and (min-width: 1280px) {
  img.mob {
    position: absolute;
    bottom: -23px;
    right: 23%;
  }
  @media only screen and (min-width: 1400px) {
    img.mob {
      position: absolute;
      bottom: -23px;
      right: 27%;
    }
<html>
<main class="uni-design pt-5">
  <div class="container">
    <h3>For all devices</h3>
    <h3 class="bt">Unique design</h3>
    <div class="clearfix"></div>
    <img src="images/tab.png" class="img-fluid pt-4" />
    <img src="images/mobnew.png" class="img-fluid mob" />
  </div>
</main>

</html>

enter image description here

1 Ответ

1 голос
/ 26 апреля 2019

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

.res-design {
    display: flex;
    justify-content: center;
}

.res-design .mobile {
    align-self: flex-end;
    margin: 0 0 0 -8%;
    border: 1px solid;
    display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<main>
    <div class="container my-5">
        <div class="res-design">
            <img src="https://via.placeholder.com/600x400.png" class="img-fluid tab" />
            <img src="https://via.placeholder.com/150x200.png" class="img-fluid mobile" />
        </div>
    </div>
</main>
...