如何根据浏览器大小调整图像大小？答案

【问题标题】：how to make the image resize based on browser size?如何根据浏览器大小调整图像大小？
【发布时间】：2020-03-09 14:57:32
【问题描述】：

这是我的html

<div class="parent" >
  <div class="Home">
      <a href="home.php"><img id="homeinactive" class="homeIconInactive" src="images/navHeader/homeinactiveOver.png"/></a> 
  </div>
</div>

这是我的css

.parent {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    overflow: hidden;
}


    img#homeIconInactive:hover{
      content: url("/images/navHeader/homeIconInactive.png") no-repeat;
      position: absolute;
      z-index: 2;
      top: 0.3.8%;
      left:  49.2%;
      width: 55px;
      height: 50px;

    }

.containerHome img {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

之所以这样编码，是因为整个页面只是嵌入到 html 中以显示为原型的图像，只有顶部的按钮有超链接。问题是，每当我手动调整浏览器的大小时，按钮都会不跟随浏览器的大小，有解决办法吗？

【问题讨论】：

先把图片src中的空格去掉。您在 html 中的 navHeader 之后提供了空间
那是在stackoverflow粘贴......不是问题
你可以创建一个小提琴或其他东西来显示实际行为吗？另一件事请尽可能详细说明。谢谢
想象一下你有页面设计，并将其嵌入到一个简单的 html 中。所以它就像一个看起来像网页的整个图像。只有页面顶部的按钮似乎是动态的，因为它有一个锚标记。当您调整浏览器大小时，整个页面图像也跟随浏览器大小，除了按钮单独
这能回答你的问题吗？ fit background image to browser width and expand height if necessary

标签： html css

【解决方案1】：

您的 CSS 中的 .containerHome 没有根据您提供的 HTML 定位任何内容。

将其更改为以下应该可以工作

.Home img {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

【讨论】：

【解决方案2】：

您只需要将 img 宽度设为 100%。它可以根据设计自动调整。

还需要宽度或父级。因为图像 100% 宽度代表父 div 的宽度。作为

.home{width:set width of parent; overflow:hidden}
.home img{width:100%} or .home .homeIconInactive{width:100%}

【讨论】：