Изменение размера изображения с отзывчивой компоновкой

-1

Может кто-нибудь помочь мне выяснить, почему мой логотип не изменяет размер в соответствии с размером браузера?Изменение размера изображения с отзывчивой компоновкой

---------------- CSS ---------------------

body { 
     height: 100%; 
     background-color:#333; 
} 
#logo { 
     max-width: 100%; 
} 
img { 
    border: 0; 
    max-width: 100%; 
    height: auto; 

} 
#header-bg { 
    background-image: url("header-bg.png"); 
    overflow: auto; 
    width: 100%; 
}

- --------------- HTML -------------------

<body> 
    <div id="header-bg"> 
    <div id="logo"> 
     <img src="logo.png" /> 
    </div> 
    </div> 
</body>

источник

2013-02-12 MG1

причина, вы дали max-width , что может быть меньше, чем оригинал width. Поэтому предоставление width решит вашу проблему.

img { 
    border: 0; 
    width: 100%; 
    height: auto; 
}

Кроме этого, все правильно.

Если вы чувствуете, что изображение не тааак большое, что он занимает всю ширину экрана, дает меньшую ширину к родительскому, скажу 25%. И к изображению width от 100%. Таким образом, родитель настраивается точно в соответствии с шириной экрана, так же как и ваш образ. :)

источник

2013-02-12 16:39:27

, когда я устанавливаю ширину до 100%, он расширяет логотип на всем окне. – MG1

@ MG1 См. Обновленный ответ. Надеюсь, это поможет. :) –

Я создал jsFiddle для вас, чтобы показать, что @Praveen Kumar объяснил: http://jsfiddle.net/persianturtle/4h2xU/1/ –

Изменение размера изображения с отзывчивой компоновкой

ответ

Смежные вопросы