Как сделать размер изображения в зависимости от размера браузера?

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

вам просто нужно сделать ширину img как 100%. он может автоматически настраивать его в соответствии с дизайном.

также требуется ширина или родительский элемент. потому что ширина изображения 100% представляет ширину родительского div. как

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

Answer 2

Ваш .containerHome в вашем CSS не нацелен на что-либо на основании предоставленной вами HTML.

Измените его на следующее должно работать

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