Question

巨无霸上的这张照片怎么能表现出很好的响应性

当小车行不佳时，巨无霸中的图像，我该如何解决？这是我使用的代码

  width: 100%;
  height: 100vh;
  background: url(images/fid.jpg) no-repeat 50% 50%;
  background-size: cover;

！[有效的XHTML] [1]：https://i.stack.imgur.com/IPHq0.jpg ！[有效的XHTML] [2]：https://i.stack.imgur.com/huBP1.jpg

Answer 1

我不确定这是否行得通，但请尝试

  width: 100%;
  height: 100vh;
  background: url(images/fid.jpg) center center no-repeat;
  background-size: cover;

Answer 2

将背景尺寸设置为100％100％，强制图像在高度和宽度上占据父元素的100％。

  .jumbotron {
    background-image: url("images/fid.jpg");
    background-size: 100% 100%;
   -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;}

小层时巨型机中的图像看起来不好

2 个答案: