背景图像流体调整大小答案

【问题标题】：Background Image Fluid Resizing背景图像流体调整大小
【发布时间】：2020-10-03 17:23:42
【问题描述】：

我正在使用标题标签内的背景图片。代码如下：

<div id "header">
<div id "logo">
<div id "nav">


</div>
</div>
</div>

标题位于宽度为 75% 的容器元素内。徽标图像宽 1024 像素，高 75 像素。我正在尝试找到一种解决方案，将背景标签内的徽标图像保持在容器元素的 100% 宽度，并且在调整大小时按比例调整大小。

我想到的解决办法是

background-size:auto;

我选择了 1024 像素，因为它可以容纳大多数屏幕。最小宽度为 780 像素，最大宽度为 1024 像素。

让这个背景图像按照访问者屏幕和它所在的容器元素的比例重新调整大小的最佳解决方案是什么。

谢谢

【问题讨论】：

【解决方案1】：

试试这个：

 background-size: 100%;

【讨论】：

【解决方案2】：

我发现最好的方法是

最小宽度：100%;

【讨论】：

【解决方案3】：

调整背景大小的唯一方法是使用 JavaScript。

【讨论】：