Question

当我缩小到移动设备时，我的第一个{ars}类的div就消失了。

其余所有divs的大小都正确调整，我没有针对该div的媒体查询。

以下是我的代码：

<div class="container-fluid">
      <div class="row padRight ">
        <div class="container-fluid armando col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
        <div class="container-fluid col-lg-4 col-md-6 col-sm-12 col-xs-12">

        <div class="text-center"><h4>Local Amenities</h4>
        </div>

          <p class="marRL"><a href="https://pt-pt.facebook.com/PORTA10Hotdogs/" target="_blank">Porta 10 </a>is a little gem of a snack bar it's within a couple of minutes walk from the apartment.
          The owner Armando is a gentleman, very friendly and accommodating and will adjust any dish to suit you.<br>

          Really nice and clean venue, food and drinks are very cheap and they have a particularly good variety of hot dogs. There is plenty of other dishes to choose from including breakfast.

          If you are looking for a good value meal I couldn't recommend it more.
          <br>Maxi Pizza next door also do great pizzas for eating in or take away if you dont fancy going out.
          Then you have BC's a few doors down really nice portuguese resturant with great food and great prices.<br>
          The bus stop for the old Town is directly opposite on the other side of the road, making Porta 10 very handy for a swift one on the way down Town.
          </p>

        </div>
        <div class="mdframe container-fluid col-lg-4 col-md-12 col-sm-12 col-xs-12 porta10"></div>ter code here

   //CSS 
    .armando {
         background-image: url("../images/rsz_armando.jpg");
         background-repeat: no-repeat;
         background-position: center;
         background-size: contain;
     }

Answer 1

由于要使用背景图像显示图像，因此需要指定要显示图像的min-height中的div，尤其是其中没有内容的情况下。

添加min-height值将迫使div伸展，从而显示background-image。

Answer 2

您需要将min-height设置为class .armando，请检查以下代码：

.armando {
    background-image: url("../images/rsz_armando.jpg");
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100px;
}

Answer 3

对背景图片使用以下代码：

.armando {
    background-image: url("../images/rsz_armando.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;        
    min-height: 100px; /* Change this to your need
}

Answer 4

请设置所需的最小高度。您也会忘记关闭某个div，因此将以下代码更新为现有代码

.armando {
  background-image: url("http://placekitten.com/1000/500");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  min-height: 300px;
}

<div class="container-fluid">
  <div class="row padRight ">
    <div class="container-fluid armando col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="container-fluid col-lg-4 col-md-6 col-sm-12 col-xs-12">
      <div class="text-center"><h4>Local Amenities</h4></div>
    </div>
    <p class="marRL"><a href="https://pt-pt.facebook.com/PORTA10Hotdogs/" target="_blank">Porta 10 </a>is a little gem of a snack bar it's within a couple of minutes walk from the apartment.
      The owner Armando is a gentleman, very friendly and accommodating and will adjust any dish to suit you.<br>

      Really nice and clean venue, food and drinks are very cheap and they have a particularly good variety of hot dogs. There is plenty of other dishes to choose from including breakfast.

      If you are looking for a good value meal I couldn't recommend it more.
      <br>Maxi Pizza next door also do great pizzas for eating in or take away if you dont fancy going out.
      Then you have BC's a few doors down really nice portuguese resturant with great food and great prices.<br>
      The bus stop for the old Town is directly opposite on the other side of the road, making Porta 10 very handy for a swift one on the way down Town.
     </p>
    </div>
  <div class="mdframe container-fluid col-lg-4 col-md-12 col-sm-12 col-xs-12 porta10"></div>
</div>

Answer 5

首先，您不需要在所有container-fluid中重复div，因此可以将其删除。只能将其保留在父div中。

然后要解决班级.armando的问题，您只需要添加最小宽度/最小高度，这将使图像调整大小直至该点。

Answer 6

您似乎正在尝试在div中显示没有内容的背景图片。我无法使用您发布的代码来复制您的实际问题。但这是避免遗忘没有内容的div的一种方法。

注意：我不得不稍加编辑您的代码，使用一些花朵的背景图片，并包含引导程序库。

.armando {
  background-image: url("https://www.publicdomainpictures.net/pictures/40000/velka/daisies-1362124729AqU.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.armando:empty::before{
  content:"\200B"; /*Make sure there's content in the div*/
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
      <div class="row padRight ">
        <div class="container-fluid armando col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
        <div class="container-fluid col-lg-4 col-md-6 col-sm-12 col-xs-12">

        <div class="text-center"><h4>Local Amenities</h4>
        </div>

          <p class="marRL"><a href="https://pt-pt.facebook.com/PORTA10Hotdogs/" target="_blank">Porta 10 </a>is a little gem of a snack bar it's within a couple of minutes walk from the apartment.
          The owner Armando is a gentleman, very friendly and accommodating and will adjust any dish to suit you.<br>

          Really nice and clean venue, food and drinks are very cheap and they have a particularly good variety of hot dogs. There is plenty of other dishes to choose from including breakfast.

          If you are looking for a good value meal I couldn't recommend it more.
          <br>Maxi Pizza next door also do great pizzas for eating in or take away if you dont fancy going out.
          Then you have BC's a few doors down really nice portuguese resturant with great food and great prices.<br>
          The bus stop for the old Town is directly opposite on the other side of the road, making Porta 10 very handy for a swift one on the way down Town.
          </p>

        </div>
        <div class="mdframe container-fluid col-lg-4 col-md-12 col-sm-12 col-xs-12 porta10"></div>ter code here

缩小为手机时图片消失

6 个答案: