Question

这就是代码所发生的事情。

这是代码...

<div style="background-image: url(img/background.jpg);background-repeat: no-repeat; height:250px;"></div>

图片大小为963w x 200h。

在一天结束时，我希望宽度为100％，但还要对所有设备都响应。我该如何实现？

添加background-size:cover;不会成功。

这是一个小提琴：https://jsfiddle.net/t7ekj0mh/

Answer 1

添加Highcharts.chart("container", { chart: { type: 'line' }, xAxis: { type: "datetime", labels: { formatter: function () { return Highcharts.dateFormat('%H:%M:%S.%L', this.value); } } }, series: [{ name: "A", type: "area", color: "#BB000B", keys: ["y", "x"], data: [ [0.58, 1604244900], [0.59733333333, 1604244915], [0.6, 1604244930], [0.6, 1604244945], [0.6, 1604244960], [0.6, 1604244975], [0.612, 1604244990] ] }, { name: "B", type: "line", color: "#FF00F0", keys: ["y", "x"], data: [ [2, 1604244900], [2, 1604244915], [2, 1604244930], [2, 1604244945], [2, 1604244960], [2, 1604244975], [2, 1604244990], [2, 1604245005] ] }, { name: 'C', keys: ['y', 'x'], data: [ [1, 1604244900], [1, 1604244915], [1, 1604244930], [1, 1604244945], [1, 1604244960], [1, 1604244975], [1, 1604244990], [1, 1604245005] ] } ] }); `contain`，以使图像水平缩放

据我了解，这就是您要实现的目标。

background size

div{
  background: #E6DCDD url(https://i.ibb.co/2jCzQB6/background2.jpg)  center bottom / contain no-repeat;
  height: 300px;
  border: 5px dashed red;
}

这将水平拉伸图像并将其放置在底部，并通过添加颜色看起来像是一件事情。

Answer 2

将规则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>

标头div背景100％宽度，固定高度

2 个答案: