Отзывчивое изображение поверх отзывчивого изображения CSS

Question

У меня на моем сайте есть логотип, который я пытаюсь сделать посередине и быть отзывчивым. Я пробовал тонны кода CSS с «magin-left: auto; ...» до «top: 30 ...», но логотип не станет меньше и останется посередине. Мне было интересно, может ли кто-нибудь помочь мне. Heres my website - http://www.mediadude.co.uk - Логотип - это большой знак mediadude в середине, попробуйте изменить размер браузера, и вы увидите, что он не остается посередине и становится меньше.

Спасибо за ваше время.
Hantoo

Answer 1

У вас есть max-width к изображению, но не к тегу h1.

h1#LogoMain { 
    max-width: 100%; 
} 

Также у вас есть медиа-запрос давая bodypadding: 20

@media (max-width: 767px) { 
    body { 
     padding-top: 0; 
     padding-right: 20px; 
     padding-left: 20px; 
} 

изменить вышеуказанные значения в 0 для края до края взгляд на ваш заголовок и т.д.

Answer 2

Это будет делать то, что вы хотите : http://jsfiddle.net/TJF8k/1/

<div class="header"> 
    <div class="floater"></div> 
    <div class="imgwrap"> 
    <img class="image" src="//placehold.it/400x150"> 
    </div> 
</div> 

Для CSS вам необходимо отрегулировать отрицательный margin-bottom на .floater на основе размеров вашего изображения.

.header { 
    background-color: teal; 
    height: 300px; 
} 

.floater { 
    height: 50%; 
    width: 100%; 
    margin-bottom: -10%; 
} 

.imgwrap { 
    width: 50%; 
    margin: 0 auto; 
    max-width: 400px; 
} 

.image { 
    max-width: 100%; 
    vertical-align: bottom; 
}