Сделать изображение придерживаться нижней части DIV? Не работает - PullRequest
Новая
       6

Сделать изображение придерживаться нижней части DIV? Не работает

0 голосов
/ 09 мая 2018

Мне нужно, чтобы мое изображение прилипало к нижней части моего DIV. Я прочитал пост с тем же вопросом, на который был дан ответ здесь , но когда я попробую его, весь макет ломается. Есть идеи?

Вот так должен выглядеть мой сайт (посмотрите на руку и как он касается нижней части DIV) здесь . Когда я изменяю размер окна, рука начинает отделяться от нижней части DIV, вы можете видеть это здесь 

.right-bg {
  background-color: #fff;
  background: url(../images/right-bg.png) no-repeat right top;
  min-height: calc(100vh - 60px);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.que-es-vpay-content {
  display: inline-block;
  margin-top: 10%;
}

.que-es-vpay-image {
  float: right;
  margin-top: 5%;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>

  <!-- MY HTML -->
  <div class="row">
    <div class="col-lg-12 right-bg">
      <div class="col-lg-6 col-md-6 col-sm-12 que-es-vpay-content">
        <h1 class="section-title">¿Qué es Vpay?</h1>
        <p class="section-p">Vpay es una plataforma de pago y transferencia digital de fácil uso donde puedes realizar transferencias rápidas y seguras.
        </p>
        <div class="col-lg-12 d-flex justify-content-center">
          <a href="#" class="section-btn">¿Cómo funciona?</a>
        </div>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-12 que-es-vpay-image">
        <img src="https://4.imimg.com/data4/BB/RH/MY-15241145/multimedia-mobile-phone-500x500.jpg" alt="Aplicación Vpay">
      </div>
    </div>
  </div>
  <!-- /MY HTML -->
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Мне удалось решить мою проблему, добавив эти строки CSS в мои фоновые изображения: 

.background-image {
    min-width: none;
    max-width: none;
}

Я надеюсь, что это может быть полезно для других людей. Ура! * * 1004

0 голосов
/ 09 мая 2018

Я не могу воспроизвести проблему, так как для этого недостаточно кода.

То, что я бы сделал, чтобы "сделать изображение прикрепленным к нижней части div" в вашем случае, выглядит примерно так:

HTML 

<div class="col-lg-6 col-md-6 col-sm-12 que-es-vpay-image">
  <img src="https://picsum.photos/g/200/300" alt="Aplicación Vpay">
</div>

CSS 

.que-es-vpay-image {
  float: right;
  margin-top: 5%;
  position: relative;
}

.que-es-vpay-image img {
  position: absolute;
  bottom: 0;
}

Дайте мне знать, если это работает для вас.

...