Масштабирование текста и изображения в CSS

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

У меня есть фоновое изображение на месте, ища ответы в этом форуме. Он прекрасно работает с этим кодом:

CSS

#imagescale {  
    width: 100%; 
    position: scroll; 
    left: 0px; 
    top: 0px; 
} 

.stretch { 
    width:100%; 
    height:100%; 
}

HTML:

<div id="imagescale"><img src="http://beautebeaute.dk/wp-content/uploads/2013/11/Topbilledeny.jpg" class="stretch" alt=""/>

Но я не могу показаться, чтобы выяснить, как я могу написать код для наплавки текст, который будет масштабироваться с изображением. Если я использую проводник that I found in this forum, он не будет течь с экраном на веб-сайте, мобильном телефоне и т. Д. Можете ли вы помочь?

источник

2013-11-02 AllanFatum

Рассматривали ли вы с помощью фонового изображения CSS вместо HTML-изображения? –

Почему бы не добавить текст как изображение svg и увеличить его?

источник

2013-11-02 16:43:56 Cozmoz

Зачем так много сложностей? OP не упоминал SVG или что-то в этом роде –

Я просто подумал, что это простой способ иметь шкалу текста рядом с изображением. Проведя некоторые исследования, это будет работать одинаково хорошо: http://css-tricks.com/viewport-sized-typography/ – Cozmoz

Если вы хотите div заполнить всю область просмотра, вы должны сначала установить

html, body { 
    height: 100%; 
}

Тогда вы можете дать

#imagescale {  
    width: 100%; 
    height: 100%; 
}

Чтобы заполнить его с изображением

#imagescale { 
    background-image: url(http://lorempixel.com/1200/1000); 
    background-repeat: no-repeat; 
    background-position: center top; 
}

сейчас , вы можете центрировать текст. Одно из решений здесь CSS трюков Centering in the Unknown

#imagescale { 
    text-align: center; 
} 

#imagescale:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
}

Смотрите полный JSFiddle

источник

2013-11-02 16:55:16

Масштабирование текста и изображения в CSS

ответ

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