Question

如何使此图片响应

HTML：

<section id="first" class="story" data-speed="8" data-type="background">
    <div class="smashinglogo" id="welcomeimg" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
</section>

CSS：

#first .smashinglogo {background: url(../images/logo1.png)  50% 100px no-repeat fixed;}

Answer 1

将background-size属性用于100% auto的值，以实现您的目标。

对于实例，

#first .smashinglogo{
   background-size:100% auto;
}

希望这有帮助。

PS：根据您的上述代码，您可以删除fixed并添加100% auto以实现输出。

Answer 2

尝试添加background-size:cover

.smashinglogo {background: url(../images/logo1.png)  50% 100px no-repeat fixed;
  background-size: cover;
  height:600px
}

查看this tutorial详细文章。

Answer 3

试试这个：

background-size:100% auto;

或

background-size: cover;

Answer 4

而不是固定使用

最大宽度：100％;

这将有效。

最终输出

.smashinglogo {
  background: url(../images/logo1.png)  50% 100px no-repeat;
  max-width: 100%;
}

Answer 5

#first .smashinglogo{
 background-image: url(../images/logo1.png);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: 50% 50%;
}

试试这个，它可能适合你。

Answer 6

我只是总结了一个帮助我走同样路线的答案。

.smashinglogo {
  max-width: 100%;
background-size:100% auto;
}

.smashinglogo {
  max-width: 100%;
background-size:cover;
}

上述两个代码都运行良好。

Answer 7

制作响应式图像的方法有很多种。

基本规则是使用%值而不是pixel值。第二种是使用@media queries来定位移动设备和平板电脑。

此外，您可以使用CSS3新技术使图像响应：

.img-element: {url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

您可以点击此链接阅读有关自适应图片的更多信息。 http://css-tricks.com/which-responsive-images-solution-should-you-use/

Answer 8

如果你的div背景图像在小型设备上堆叠时消失（通常宽度低于577像素），则添加“min-height：310px;”对你的CSS。

如何使div背景图像响应

8 个答案: