Question

这是我的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中的图像以显示为原型，所以只有顶部的按钮具有超链接。问题是，每当我手动调整浏览器大小时，按钮不遵循浏览器的大小，是否可以解决此问题？

Answer 1

您的CSS中的.containerHome不会基于您提供的HTML定位任何内容。

将其更改为以下内容应该可以

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

Answer 2

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

还需要宽度或父级。因为图像100％的宽度表示父div的宽度。

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

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

2 个答案: