У меня есть фоновое изображение в следующем div, но изображение обрезается:
<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">
Есть ли способ показать фоновое изображение, не отключая его?
Вы можете достичь этого с помощью свойства background-size, которое теперь поддерживается большинством браузеров.
Чтобы масштабировать фоновое изображение, чтобы вместить его в div:
background-size: contain;
Чтобы масштабировать фоновое изображение, чтобы охватить весь div:
background-size: cover;
Также существует фильтр для поддержки IE 5.5+, а также префиксы поставщика для некоторых более старых браузеров.
Если вам нужно изображение имеет те же размеры div, я думаю, что это самое элегантное решение:
background-size: 100% 100%;
Если нет, то ответ @grc является наиболее подходящим.
Источник: http://www.w3schools.com/cssref/css3_pr_background-size.asp
вы также используете это:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
Я не знаю ваших значений div, но предположим, что у вас есть эти.
height: auto;
max-width: 600px;
Опять же, это просто случайные числа. Было бы довольно сложно сделать фоновое изображение (если вы захотите) с фиксированной шириной для div, поэтому лучше использовать max-width. И на самом деле не сложно заполнить div фоновым изображением, просто убедитесь, что вы правильно устанавливаете родительский элемент, поэтому изображение имеет место, в которое оно может войти.
Крис
С его помощью вы меняете ширину и высоту div или устанавливаете размер фона.