У меня есть div с текстом, высота, ширина и положение которого (вверху и слева) указаны в процентах, чтобы его размер можно было изменять в окне браузера. Этот div также имеет фоновое изображение, соотношение сторон которого я хочу сохранить при изменении размера, и я хочу изменить размер текста так, чтобы он умещался в границах div.
Я нашел плагин jQuery, который я немного изменил, чтобы я мог изменить размер шрифта onResize, чтобы он поместился в div. Результат: http://jsfiddle.net/JMVXA/10/
Теперь то, что я пытаюсь сделать, - поместить этот div в другой div с фоновым изображением, размер которого изменяется onResize и в то же время сохраняет соотношение сторон изображения (чтобы оно не выглядело искаженным).
У меня возникают трудности с этим, поскольку, если я получаю автоматическое изменение размера текста, я не поддерживаю соотношение сторон, и если я получаю правильное соотношение сторон, размер текста не изменяется.
Есть изменение размера текста, но (если вы слишком сильно сжали пчелу) изображение искажается вместо сохранения соотношения сторон: http://jsfiddle.net/JMVXA/11/
#parent{
width: 100%;
height: 100%;
position: relative;
background-image: url("Bee Image");
//padding-top: 81.799591002%;
background-size: 100% 100%;
}
Если я изменю #parent на это, соотношение сторон будет работать, но размер текста не изменится должным образом:
#parent{
width: 100%;
position: relative;
background-image: url("Bee Image");
padding-top: 81.799591002%;
background-size: 100% 100%;
}
Я знаю часть проблемы. Плагин требует, чтобы width () и height () возвращали ненулевое число, но мой CSS для соотношения сторон оставляет высоту неуказанной (что возвращает 0 для высоты). Так что я не знаю, что мне делать дальше.
Есть идеи, как это сделать?
Я новичок в HTML, jQuery и CSS, но у меня есть опыт программирования на других языках.
EDIT1 Я хочу, чтобы текстовый div сохранял тот же относительный размер и положение в изображении. Это было бы так, как если бы текст был внутри самого изображения (с точки зрения расположения и размера). Так что текст всегда должен быть на крыльях пчелы. И я хочу сохранить такое же соотношение сторон при изменении размера. EDIT2 Дополнительная информация: я делаю веб-сайт с большими изображениями с текстом перед ними. Поэтому я хотел бы иметь возможность указывать размеры и позиции div, который будет содержать текст и иметь любой текст, который я помещаю в div, для изменения размера, чтобы он мог уместиться внутри границ div.
ems,rems &Media Queries, чтобы настроить его на критических моментах. Вы никогда не сможете сделать его 100% отзывчивым и широким устройством / обратной совместимостью, но вы можете довольно близко подойти к обоим. - person Dom schedule 25.06.2013