如何使用 css 使背景图像响应？
[英]How do I make a background image responsive using css?
问题描述
I placed an image as a header background-image for the body and wanted to make it responsive...However when i change the window size, the background is responsive however the image seems to clip somewhere and the actual image that needs to be in the focus disappears...
我将图像放置为身体的 header 背景图像，并希望使其具有响应性...但是当我更改 window 大小时，背景是响应性的，但是图像似乎在某处剪辑，而实际图像需要在其中焦点消失了……
Here is the code:这是代码：
.topnav { background-image: url(/images/pastry-topnav-bgd-img.jpg); background-size: cover; background-repeat: no-repeat; width: 100%; height: 400px; }
<body> <header> <div class="topnav"></div> </header> </body>
Can someone help me with how i can make the image responsive in such a way that the background-image stays in focus and does not displace much有人可以帮助我如何使图像响应以使背景图像保持焦点并且不会移位太多
1 个解决方案
解决方案1
0 2021-05-23 07:59:17
probably you need to use this可能你需要使用这个
background-size: 100% 100%;
instead of using而不是使用
background-size: cover
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.