Высота логотипа не реагирует

Question

Логотип «rh» на моем сайте реагирует вертикально, то есть идеально подходит к высокому тонкому окну, но не изменяет его размер до широкого короткого окна. Может ли кто-нибудь помочь мне сделать логотип чувствительным к ширине и высоте?

вот сайт ... (занимает немного, чтобы загрузить)

http://rhwebdesign.co.uk/

Вот мой CSS:

img { 
    height: auto; 
    max-width: 100%; 
    vertical-align: middle; 
} 

Answer 1

Чтобы быть точным и задать свои вопросы о логотипе, рассмотрите настройку максимальной высоты относительно высоты окна.

У вас есть:

img { 
    height: auto; 
    max-width: 100%; 
    vertical-align: middle; 
} 

.hero-logo img { 
    max-width: 100%; 
    min-height: 100%; 
    padding: 20px; 
} 

Для того, чтобы масштабировать логотип, добавить в к последнему блоку:

max-height: 100vh; 

Это устанавливает изображения максимальная высота до 100% от высоты видового экрана, который похоже, то, что вы желаете здесь. Обратите внимание, что под ним есть какой-то текст, который не отображается, так как это текст, заключенный в H5. Эти две строки имеют высоту 68px (40px padding плюс 28px для текста).Таким образом, вы можете отрегулировать вышеуказанное значение:

max-height: calc(100vh - 68px); 

Answer 2

Похоже, в ландшафтном режиме (480x320), есть сценарий, который неправильно вычисляет размер поля.

<div class="container hero-content" style="margin-top: -97.5px;"> 

загляните в main.js для этой функции:

heroContent.css({ 
      "margin-top" : topContentMargin+"px" 
     }); 

Что это:

topContentMargin = (heroHeight - contentHeight)/2, 
heroHeight = windowHeight, 
contentHeight = heroContent.height(), 

Я действительно не смотрел в то, почему он calulating это неправильно. Я предполагаю, что heroContent слишком высок для ландшафтного режима, потому что изображение становится высоким на 441 пиксель с максимальным значением медиа-запроса: 100%. Поэтому он пытается добавить отрицательный запас для компенсации.

Моей рекомендацией было бы удалить вычисление jQuery размера содержимого героя и применять размеры, используя только запросы css и media.

Edit:

Вы должны быть более конкретными с CSS. Learn some more about css specifity. Вы должны включить ваши самые большие медиа-запросы вверху, поэтому меньшие будут иметь приоритет внизу. Делает все проще. Также IMHO, я бы не использовал запросы для чего-то большего, чем iPad. то есть. 1024px. Хотя вы должны всегда тестировать новые устройства, если это возможно.

Вам нужно будет указать высоту видео для каждого конкретного размера устройства. Я не могу сказать сейчас, но, возможно, jquery определял высоты раздела, поэтому теперь css определяет высоту видео.

Итак, в нижней части таблицы стилей попробуйте это.

div#bgVideo.skrollable.skrollable-between video#video_background { 
    min-height:940px !important; 
} 

@media (max-width: 480px) { 
.hero-logo img { 
    max-width:55%; /*looks nice at 480 */ 
    padding:20px; 
    } 
div#bgVideo.skrollable.skrollable-between video#video_background { 
    min-height:320px !important; 
    } 
} 

@media (max-width: 320px) { 
div#bgVideo.skrollable.skrollable-between video#video_background { 
     min-height:480px !important; 
    } 
} 

Но, честно говоря, вы должны быть самим устранять неполадки и тестировать дизайн. Как вы узнаете, если вы не попробуете. Помните, firebug - ваш лучший друг :)