Сделать текст относительно отзывчивого изображения

У меня возникли проблемы с отображением некоторого текста в браузере и относительно изображения.Сделать текст относительно отзывчивого изображения

Это то, что я до сих пор

http://jsfiddle.net/yJ8wh/

Как вы можете видеть, что есть отзывчивое изображение, но когда браузер идет меньше, текст выходит из пропорции, я m пытается сделать процесс более плавным, чем в настоящее время. Надеюсь, я объяснил это правильно. Все немного запутанно.

Вот что я до сих пор:

не

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

.image {position: relative; text-align: center;} 

.image span {position: absolute; line-height: 20px; display: block; top: 50%; 
    margin-top: -10px; width: 100%; color: white;} 

img.ri 
{ 
position: relative; 
max-width: 75%; 
display: inline-block; 
vertical-align: middle; 
} 

@media screen and (orientation: portrait) { 
img.ri { max-width: 90%; } 
} 
@media screen and (orientation: landscape) { 
img.ri { max-height: 90%; } 
} 

img#hv { 
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ 
filter: gray; /* IE6-9 */ 
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ 
} 

img#hv:hover { 
filter: none; 
-webkit-filter: grayscale(0);} 

</style> 
</head> 
<body> 

<div class="image"> 
<img src="http://static.inqmind.co/content/2013/05/aap-mob-always-strive-and- prosper/feature.jpg" class="ri" id="hv"> 
<span>ASAP ROCKY - Jack New City</span> 
</div> 
</body> 
</html>

источник

2013-06-10 Kadeem Laurie

Я не думаю, что есть чистое решение CSS. Хотя это можно сделать с помощью Javascript. – Smuuf

Вы уже используете mediaqueries, почему бы и не использовать шрифт?
пример: http://jsfiddle.net/GCyrillus/yJ8wh/6/

@media screen and (max-width:500px) {.image {font-size:0.5em;}

источник

2013-06-10 17:32:42

Там в настоящее время нет удобного CSS-решения, вы, чтобы использовать некоторые простые JavaScript расчетов:

http://fiddle.jshell.net/yJ8wh/4/

var img = $("img"); 
var compressor = 14; 
$("span").css({ 
    fontSize: Math.max(Math.min(img.width()/(compressor * 1), parseFloat(Number.POSITIVE_INFINITY)), parseFloat(Number.NEGATIVE_INFINITY)) + 'px' 
});

выше код принят от fitText.js: http://fittextjs.com/

источник

2013-06-10 17:16:04 yckart

Это все равно то же самое? – Lobato

@ Rafael Конечно! Это немного упрощено и вырезано из оболочки jQuery-plugin ... – yckart

Сделать текст относительно отзывчивого изображения

ответ

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