Question

将背景图像设置为巨型机组件无法响应，而是有时沿高度和宽度拉伸。

尝试覆盖超大类设置背景图像，背景大小覆盖。甚至尝试过将高度和宽度调整为100％并自动调整。

如何使图像具有响应性！

.jumbotron.jumbotron-fluid
  .container
    h1.display-4 Fluid jumbotron
    p.lead
      | This is a modified jumbotron that occupies the entire horizontal space of its parent.

.jumbotron{
    background: url("https://preview.redd.it/ue9911r3a4ez.jpg?overlay-align=bottom,left&overlay-pad=8,16&crop=636:279,smart&overlay-height=0.10&overlay=%2Fv9vyirk6hl221.png%3Fs%3Db466421949eb723078743745ce6421609d7a9c66&width=636&height=279&auto=webp&s=b1793a09afb650d8f3d2fb2596c40ca1a8240a2e") no-repeat; 
    background-size: cover; 

}

Answer 1

.jumbotron {
 background-image: url('...');
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

尝试使用这些命令，该图像将具有响应性，但是该图像可能/可能不会占据整个超长波

引用此链接（第4点）：https://blog.creative-tim.com/web-design/bootstrap-background-image/

响应式超大背景图像

1 个答案: