我有一个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。