Question

我试图让div显示一个背景图像，它具有相同的宽高比，如果我有一个img元素并使用了boostrap img-fluid类。我尝试使用百分比填充内容，但它没有那么好用。有没有更好的计算方法，所以屏幕尺寸的高度和宽度都是正确的？

Here is a jsfiddle我的问题。第一个图像位于背景图像上，第二个图像位于每个尺寸的图像应该是什么样的参考图像。

＆＃13;

.img-container{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size:cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url("http://placekitten.com/1000/390");
}

.img-container .panel{padding: 14% 0;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid img-container">
  <div class="row">
    <div class="col-xs-12">
      Logo
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="panel text-xs-center">
        <h1>Heading goes here</h1>
      </div>
    </div> 
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <img src="http://placekitten.com/1000/390" class="img-fluid" alt="Reference image size">
  </div>
</div>

＆＃13;

任何帮助都会很棒！

具有背景图片和内容的响应式div

0 个答案: