HTML，背景图片高度和宽度不按百分比缩放答案

【问题标题】：HTML, background picture height and width not scaling with percentagesHTML，背景图片高度和宽度不按百分比缩放
【发布时间】：2019-08-03 00:11:41
【问题描述】：

我正在使用带有 HTML 和 CSS 的 Webstorm 软件，没有其他插件。我有一个 <section> 元素，它是 <html> 和标签的子元素。这个被赋予一个 ID，其中 CSS 指定以下内容：

#bgIMGHeadShot {
        z-index: -1;
        min-height: 25%;
        width:100%;
        background-image: url("Imgs/HeadShot.jpg");
        opacity: 1;
    }

<section class = "center" id = "bgIMGHeadShot">
    <div class = "clear trapezoid inBlock">
        <nav class = "nav">
            <button class = "left Navbtn"><a href = "Index.html">Home</a></button>
            <button class = "left Navbtn"><a href = "aboutMe.html">About Me</a></button>
            <div class = "left dropdown">
                <button class = "dropbtn"><a href = "robotics.html">Robotics</a></button>
                <nav class = "dropcontent">
                    <button><a href = "software.html">Software</a></button>
                    <button><a href = "CAD.html">CAD</a></button>
                    <button><a href = "competitons.html">Competitions</a></button>
                    <button><a href = "meetTeam.html">Meet The Team</a></button>
                </nav>
            </div>
            <button class = "left  Navbtn"><a href = "seaCadets.html">Sea Cadets</a></button>
            <button class = "left  Navbtn"><a href = "devBlog.html.html">Development Blog</a></button>
            <button class = "left  Navbtn"><a href = "thx.html">A Thank You</a></button>
        </nav>
    </div>

这并不需要很多 HTML，但我将向您展示中的所有内容，它应该在背景图像上创建一个梯形，其中包含导航按钮。

图片的高度和宽度都不与窗口成比例。我尝试使用两个高度：min-height、width、min-width，以及图像的 vh 和 vw 值。但是，图像不会随窗口缩放，并且在首次加载时也不是正确的大小。我也尝试在 HTML 中制作此图像，而不是将其设置为 CSS 背景图像，但这也不起作用。我可以设置图像大小的唯一方法是使用 px 值，但我希望图像随浏览器窗口缩放。 % 或 vh 和 vw 值有什么问题？

【问题讨论】：

是没有缩放的宽度和高度还是其中之一？另外，ID在什么标签下？
与 WebStorm 无关，请发表您的 HTML。
高宽都没有缩放，HTML已经贴出来了。

标签： html css

【解决方案1】：

我认为你的问题是因为你试图基本上试图将高度和宽度定义为一个变量。如果您将宽度设置为 100%，则图像将占据整个页面大小，与您设置的高度百分比无关。

您最好的选择可能是使用 JS 将高度设置为percentage of width。

如果您从下面的 sn-p 中删除 height，则图像将填充 100% 的页面并相应地缩放。

img {
    z-index: -1;
    height:100px;
    width: 50%;
}

&lt;img src="https://i.imgur.com/eWtfMME.png"&gt;

【讨论】：

我已经尝试过这个修复，但图像似乎仍然无法缩放。
@Lapras 您是否希望图像宽度为 100% 并且图像保持其原始比例？
是的，我已将图像的纵横比编辑为我想要的，因此无需调整比例。
@Lapras 为什么不将宽度设置为%。调整页面大小时，图像将保持其纵横比。