изображение заголовка не свойственное должное к мин-высоте, можем мы исправить его джкеры или так

вот моя скрипка, когда я сворачиваю окно высота заголовка установлена в min-height: 80px из-за которого в отзывчивом есть пустое пространство под изображением заголовка, есть ли способ без добавления min-height высота заголовка должна регулироваться автоматически?

Примечание: причина, по которой я добавляю min-height: 80px в заголовок, потому что в моем css все оболочки находятся в фиксированном положении

HTML —

<div class="wrapper">
  <header class="header">
    <img src="http://www.emedicalpoint.com/images/nav/sprite.jpg" alt="">
  </header>
  <div class="content">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <footer>
    footer content here
  </footer>
</div>

стиль CSS —

img {
  width: 100%;
}

.wrapper {
  bottom: 0;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
}

header {
  background: yellow none repeat scroll 0 0;
  height: 80px;
  min-height: 80px;
  width: 100%;
}

.content {
  bottom: 40px;
  position: fixed;
  top: 80px;
  width: 100%;
}

footer {
  background: #414141 none repeat scroll 0 0;
  bottom: 0;
  color: #fff;
  height: 40px;
  position: fixed;
  width: 100%;
}

2 ответа

  1. При попытке иметь отзывчивый div, вы должны избегать придания ему фиксированной высоты в пикселях. попробовать это:

        img {
            width: 100%;
            height: 100%;
        }
    
        header {
            background: yellow none repeat scroll 0 0;
            height: 10%;
            width: 100%;
        }
    
        .content {
            bottom: 40px;
            position: fixed;
            top: 10%;
            width: 100%;
        }
    

    Теперь, проценты, которые я дал, просто для иллюстрации, вам придется найти правильные проценты.

  2. Да вы можете изменить атрибуты изображения при изменении размера окна с помощью jquery следующим образом…

    $(window).resize(function () {
    if ($(window).height() < AAA) {
    $('header img').height(AAA);
    }
    });

    В приведенном выше коде AAA означает отсутствие пикселей.