标题 div 背景 100% 宽度与固定高度
[英]header div background 100% width with fixed height
问题描述
This is what is happening with the code.
这就是代码发生的事情。
Here is the code...这是代码...
<div style="background-image: url(img/background.jpg);background-repeat: no-repeat; height:250px;"></div>
The size of the image is 963w x 200h.图像大小为 963w x 200h。
At the end of the day, i would want this to be 100% width, but also be responsive for all devices.归根结底，我希望这是 100% 的宽度，但也能响应所有设备。 How can I make that happen?我怎样才能做到这一点？
adding background-size:cover;添加background-size:cover; wont do that trick.不会做那个把戏。
Here is a fiddle: https://jsfiddle.net/t7ekj0mh/这是一个小提琴： https : //jsfiddle.net/t7ekj0mh/
2 个解决方案
解决方案1
0 2020-11-07 16:40:49
Add background size contain for the image to scale horizontally添加background size contain图像以水平缩放
As I understand, this is what you are attempting to achieve.据我了解，这就是您试图实现的目标。
div{ background: #E6DCDD url(https://i.ibb.co/2jCzQB6/background2.jpg) center bottom / contain no-repeat; height: 300px; border: 5px dashed red; }
<div></div>
This will stretch the image horizontally and place it at the bottom, and by adding a color, it will seem as it is a one-piece thing.这将水平拉伸图像并将其放置在底部，通过添加颜色，它看起来就像是一件事情。
解决方案2
0 2020-11-07 16:45:03
Add the rule background-size: contain to your div .将规则background-size: contain到您的div 。
<html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css"> <body> <div style="background-image: url(https://i.ibb.co/2jCzQB6/background2.jpg);background-repeat: no-repeat; background-size: contain; height:250px;"></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.