CSS фоновое изображение не меняет размер должным образом в браузере

У меня есть этот HTML:CSS фоновое изображение не меняет размер должным образом в браузере

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 

</body> 
</html><head> 
    <link href="css/testphoto2.css" rel="stylesheet"> 
</head> 
<body> 
    <img src="http://placekitten.com/g/200/300" alt="Smiley face" width="420" height="420"> 

    <header class="section" > 
    </header> 
</body> 
</html>

и этот CSS:

body { 
    height: auto; 
    width: 100%; 

    background-color: #111; 
} 
img { 
    max-width: 100%; 
    height: auto; 
    width: auto\; 
} 
.section { 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    padding: 200px 0; 
    background: url("http://placekitten.com/g/200/300") no-repeat center center scroll; 
    background-size: cover; 
}

Я хочу иметь масштаб котенка должным образом, как браузер изменяет размер. На первом изображении котенок достигает своего собственного максимума и остается там, независимо от дальнейшего расширения браузера. Второй котенок заполняет ширину браузера, но только растягивается горизонтально, когда браузер превышает собственную ширину. Я хотел бы, чтобы котенок масштабировался в обоих измерениях по мере увеличения окна браузера. Если я удалю свойство «padding» из css, котенок исчезнет.

источник

2015-08-07 aquagremlin

Попробуйте добавить свойство max-height в свой раздел. – Vincent

Изменения в вашем CSS для "раздела" класса, как:

.section { 
display: inline-block; 
width: 100%; 
height: 300px; /* height should have to provide */ 
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll; 
background-size: cover; 
}

Высота должна предоставить.

источник

2015-08-07 05:21:45 Yash

, который не исправит ничего. однако следующий код зафиксировал первый котенок – aquagremlin

img { max-width: 100%; ширина: наследуйте!важный; height: inherit! Important; } – aquagremlin

@aquagremlin ваш код не полностью восполнил решение. – Yash

высота: 100% для HTML, корпуса и секции. Удалить прокладку из секции

html{ 
    height: 100%; 
    width: 100%; 

} 
body { 
    height: 100%; 
    width: 100%; 

    background-color: #111; 
} 
img { 
    width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
} 
.section { 
    display: inline-block; 
    width: 100%; 
    height: 100%;  
    background: url("http://placekitten.com/g/200/300") no-repeat center center scroll; 
    background-size: cover; 
}

проверить это

https://jsfiddle.net/160cL4xo/

источник

2015-08-07 05:27:49 srjt

ширина Набор & высота HTML & тела до 100%. Удалите прокладку из секции.

html,body{ 
    height: 100%; 
    width: 100%; 
}

Рабочая Демо: Fiddler

источник

2015-08-07 05:29:31

-1

Изменение в вашем CSS для "раздела" класса, как:

.section { 
display: block; 
width: 100%; 
height: 300px; /* height should have to provide */ 
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll; 
background-size: cover; 
}

источник

2015-08-07 05:32:18

К сожалению, ни одно из решений не работал для получения фонового рисунка масштабируются. Котенок каким-то образом обрезается с масштабированием. Эффект, который я хочу, чтобы достичь обеспечивается этим CSS:

html, body { 
    height: auto; 
    width: 100%; 
    background-color: #111; 
} 
img { 
    max-width: 100%; 
    width: inherit !important; 
    height: inherit !important; 
}

, но я не знаю, как добиться этого для фонового изображения. Обратите внимание, как весь котенок пропорционально заполняет рамку и никогда не обрезается с изменением размера.

EDIT: Это фиксирует фоновое изображение:

.section { дисплей: встроенный стол; прокладка: 80% 0;
background: url ("http://placekitten.com/g/200/300") центр центра без повтора; размер фона: обложка; ширина: inherit! Important; height: inherit! Important;

}

Не спрашивайте меня, почему 80% не требуется. Но фоновый котенок теперь заполняет рамку и масштабируется так же, как и html kitty.

https://jsfiddle.net/ox2dy086/

источник

2015-08-07 05:39:15 aquagremlin

https://jsfiddle.net/e5uazt35/ – aquagremlin

CSS фоновое изображение не меняет размер должным образом в браузере

ответ

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