我有一个1920 x 1300的横幅图像,我想在800像素高的容器或巨型机中显示。
我怎样才能把图像放进去,使它也具有响应性,文本也能放在图像的顶部?

<div class="container-fluid>
  <div class="image-container">
    <h1>Title</h1>
  </div>
</div>

CSS:

.image-container{
  background-image: url("..images/background.jpg");
  background-size: contain;
  height:800px;
  width: 100%;
}

或者重新调整图像大小是一个更好的主意吗?

最佳答案

我建议使用html<img>而不是css背景。
我已经对我该怎么做做做了一番猜测。
设置<div class="image-container">中的内部内容并将其设置为绝对。
这是JSFiddle

10-05 20:45
查看更多