让图像贴在 DIV 的底部？不工作答案

【问题标题】：Make image stick to bottom of DIV? Not working让图像贴在 DIV 的底部？不工作
【发布时间】：2018-05-11 01:54:46
【问题描述】：

我需要让我的图像贴在我的 DIV 底部。我已经阅读了同样问题的帖子，该问题已被回答here，但是当我尝试它时，整个布局都会中断。有任何想法吗？

这就是我的网站应该的样子（看看手以及它如何触及 DIV 的底部）here。当我调整窗口大小时，手开始从DIV底部分离，你可以看到它here

.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>

【问题讨论】：

标签： html css responsive

【解决方案1】：

由于没有足够的代码，我无法重现该问题。

在您的情况下，我要“使图像贴在 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;
}

让我知道这是否适合你。

【讨论】：

感谢易卜拉欣，但它没有用。事实上，它把我的图片扔到了网站的最顶部:(

【解决方案2】：

我设法通过将这些 CSS 行添加到我的背景图像来解决我的问题：

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

我希望这对其他人有用。干杯！

【讨论】：