CSS Div с фоновым изображением - как разрешить расширение div на странице?

Question

Я не знал, как сформулировать вопрос по этой теме ... извините.

Я только начинаю изучать CSS.

У меня есть <div> с фоновым изображением, а внутри <div> есть текст.Я читал, что выбор размера шрифта в em - хороший выбор, потому что некоторым людям может потребоваться больший размер текста в их браузерах.Таким образом, установка размера шрифта с помощью em позволит лучше приспособиться к этим типам пользователей.

Но проблема с разрешением изменения размера текста заключается в том, что во многих случаях текст в моем <div> выходит за рамки размера фонового изображения и заставляет страницу выглядеть ужасно и плохо оформленной..

Есть ли способ использовать CSS и разрешить фоновому изображению 'соответствовать' или 'развернуть' , чтобы приспособиться к большему размеру текста?

Answer 1

Вы можете установить width для div на img width, чтобы он никогда не расширялся шире (за пределы изображения).

Конечно, увеличенный текст заставит div увеличиваться по высоте.

Вы также можете установить background-img для повтора (если это позволяет изображение),что при расширении текста изображение повторяется.

background-image:url('whatever.png');
background-repeat:repeat-x;  

// x = horizontal, y = vertical

Answer 2

Поскольку вы только начинаете, вы можете прочитать http://na.isobar.com/standards/#_pixels_vs_ems, где они говорят:

Мы используем единицу измерения px для определения размера шрифта, потому что он предлагает абсолютный контрольпо тексту.Мы понимаем, что использование модуля em для определения размера шрифта было популярным, чтобы обеспечить возможность для Internet Explorer 6 не изменять размер текста на основе пикселей.Однако все основные браузеры (включая IE7 и IE8) теперь поддерживают изменение размера текста в пиксельных единицах и / или масштабирование всей страницы.Поскольку IE6 в значительной степени считается устаревшим, выбор размера пикселей является предпочтительным.Кроме того, высота строки без блока предпочтительна, поскольку она не наследует процентное значение своего родительского элемента, а вместо этого основана на множителе размера шрифта.

Правильно:

#selector {
    font-size: 13px;
    line-height: 1.5;  /*  13 * 1.5 = 19.5 ~ Rounds to 20px. */
}

Неверно:

/*  Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */
#selector {
    font-size: 0.813em;
    line-height: 1.25em;
}