Question

嗨我搜索了很多但我找不到任何解决方案。

实际上我希望每个HTML部分都有图像。它应该是响应。

这是我的代码

 <section id="portfolio">

    </section>

    <section class="success">

    </section>

和CSS

#portfolio {
  background: url(../img/STS_247650163-Web.jpg);
  background-size: cover;
height:400px;
}
.success {
  background: url(../img/success.jpg);
  background-size: cover;
height:1100px;
}

现在，如果我移除高度，图像就会消失，如果添加它们，图像就变得又大又丑。

我试过......不同的方法，但没有任何工作

谢谢

Answer 1

您可以通过两种方式制作自适应图像。

使用bootstrap- server { listen 80; root /var/www/public; try_files $uri /index.php$is_args$args; location ~ \.php$ { include fastcgi_params; fastcgi_pass unix:/var/run/php/php7.0-fpm.sock; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_index index.php; fastcgi_keep_conn on; } }
使用自定义媒体查询 -
```
.img-responsive
```
}

最好为你的div或部分使用bootstrap，试试这个 -

@media screen and (max-width: 368px) {
img.yourclass{
    min-height: 150px or auto;
}

每个部分的响应背景图像

1 个答案: