1

我无法让一些文本响应浏览器并且相对于图像。

这是我到目前为止所拥有的

正如你所看到的，有一个响应式图像，但是当浏览器变小时，文本就会变得不成比例，我试图让这个过程比现在更加无缝。我希望我已经正确解释了这一点。这有点令人困惑。

这是我到目前为止所拥有的：

<!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>
4

2 回答 2

1

目前没有合适的 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-10T17:16:04.237 回答
1

您已经使用了媒体查询，为什么不使用 font-size 呢？
示例：http: //jsfiddle.net/GCyrillus/yJ8wh/6/ 

@media screen and (max-width:500px) {.image {font-size:0.5em;}
于 2013-06-10T17:32:42.790 回答