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

Question

Я создал небольшой блог / веб-страницу с использованием CSS и HTML, но у меня, похоже, небольшая проблема. Я вставляю изображения с помощью CSS, и при этом я использую следующее:

#blogpic {
background-image: url(bpic.png);
display: block;
background-repeat: no-repeat;
background-position: center;
padding-top:275px;
text-indent:-9999px;
}

#maintext { 
background: none repeat scroll 0 0 #F5F5F5;
margin-top: 75px;
padding: 15px; 
text-align: justify;
font-family: 'Ubuntu', sans-serif; font-weight: 400; font-size: 12px;
margin-left: 18%;
margin-right: 19%;
}

В моем HTML у меня есть что-то вроде:

<div id="maintext"> 
<div id="blogpic"></div>
</div>

Кажется, что все работает нормально, но когда я изменяю размер окна моего браузера, изображения обрезаются, как и область "основного текста". Я попытался поискать в Google, чтобы найти причину, но пока не нашел.

Был бы признателен, если бы кто-нибудь мог указать мне, как избежать обрезки изображений при изменении размера окна.

Извините, если это вопрос html / css 101: я новичок в веб-программировании!

Answer 1

Если я правильно понимаю, изображения обрезаются, потому что они являются фоновыми изображениями ... то есть они не являются элементами, занимающими место на странице.

Если вы хотите избежать изображенийотрезать, вам нужно явно установить height и width на div s ... с теми числами, которые соответствуют height и width изображений.

Answer 2

Если вы изменяете размер окна браузера и когда вы прокручиваете горизонтально вправо, ваш фон обрезается?Это распространенная ошибка в элементах блока, которая имеет 100% ширины браузера.В исправлении используется минимальная ширина: [ширина страницы, т.е. 960 пикселей].

http://blue -anvil.com / archives / window-resizemobile-browser-background-bugs /