Html 如何使 div 背景图像响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22006587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make div background image responsive
提问by User1038
How to make this image responsive
如何使此图像具有响应性
HTML:
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:
CSS：
#first .smashinglogo {background: url(../images/logo1.png) 50% 100px no-repeat fixed;}
回答by Nitesh
Use background-sizeproperty to the value of 100% autoto achieve what you are looking for.
使用background-sizeproperty 的 value100% auto来实现您正在寻找的东西。
For Instance,
例如，
#first .smashinglogo{
background-size:100% auto;
}
Hope this helps.
希望这可以帮助。
PS:As per your code above, you can remove fixedand add 100% autoto achieve the output.
PS：根据您上面的代码，您可以删除fixed和添加100% auto以实现输出。
回答by Sowmya
Try adding background-size:cover
尝试添加 background-size:cover
.smashinglogo {background: url(../images/logo1.png) 50% 100px no-repeat fixed;
background-size: cover;
height:600px
}
Check this tutorialfor detailed article.
查看本教程以获取详细的文章。
回答by Iraj
try this :
尝试这个 ：
background-size:100% auto;
or
或者
background-size: cover;
回答by Alt-Rock Ninja
Instead of fixed Use
代替固定使用
max-width:100%;
最大宽度：100%；
this will work.
这会起作用。
Final Output
最终输出
.smashinglogo {
background: url(../images/logo1.png) 50% 100px no-repeat;
max-width: 100%;
}
回答by Mandar Kawtakwar
#first .smashinglogo{
background-image: url(../images/logo1.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
}
try this, it might work for you.
试试这个，它可能对你有用。
回答by Neophile
I'm just summarising with an answer that helped me along the same lines.
我只是总结了一个对我有同样帮助的答案。
.smashinglogo {
max-width: 100%;
background-size:100% auto;
}
.smashinglogo {
max-width: 100%;
background-size:cover;
}
Both the codes above worked really well.
上面的两个代码都运行得很好。
回答by Jesse Josserand
If you div background-image disappears when stacked on small devices (typically below 577px in width), then add "min-height:310px;" to your css.
如果您的 div background-image 在小型设备上堆叠时消失（通常宽度低于 577px），则添加“min-height:310px;” 到你的CSS。
回答by Kheema Pandey
Making a Responsive image there are many ways.
制作响应式图像有很多方法。
The Basic rule is use %value instead of pixelvalue. and second is use @media queriesto target the mobile devices and tablets.
基本规则是%使用价值而不是pixel价值。其次是用于@media queries针对移动设备和平板电脑。
Also you can use CSS3 new technique to make the image responsive:
您也可以使用 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;
}
you can read more about Responsive image by clicking on this link. http://css-tricks.com/which-responsive-images-solution-should-you-use/
您可以通过单击此链接阅读有关响应式图像的更多信息。 http://css-tricks.com/which-responsive-images-solution-should-you-use/
