gpt4 book ai didi

html - 使文本相对于响应图像

转载 作者:行者123 更新时间:2023-11-28 13:17:14 24 4
gpt4 key购买 nike

我在使某些文本响应浏览器以及相对于图像时遇到问题。

这是我目前的情况

如您所见,有一个响应式图像,但当浏览器变小时,文本会不成比例,我正在努力让这个过程比现在更无缝。我希望我已经正确解释了这一点。这有点令人困惑。

这是我目前所拥有的:

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

最佳答案

你已经在使用媒体查询了,为什么不用 font-size 呢?
示例:http://jsfiddle.net/GCyrillus/yJ8wh/6/

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

关于html - 使文本相对于响应图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17029231/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com