Question

我正在尝试使图像响应，并使文本也具有响应性，但是以相对方式对齐，以便匹配并且不会破坏输出。

这是我的HTML：

.checks { 
  position: relative; 
  display: inline-block;
  height: auto;
  max-width: 50%;    
}



.competitive {
  position: absolute;
  display: inline-block;
  bottom: 80%;
  font-family: 'museo_slab500';
  font-size: 150%;
  color: #fff;
  padding: 0 20px;
  width: 50;
  line-height: 150%;
}

<div class="checks">
  <img src="http://jqlconsulting.com/wp-content/uploads/2015/06/forcheckmarks2-Converted.png" alt="" style="max-    width:100%"/>
  <h2 class="competitive"><span>3 Tiered Quality Review Process</h2></span>
</div>

我做错了什么？

Answer 1

您可以使用＆＃39;％＆＃39;像100％等等。

但是你不能对文字做同样的反应。

您需要使用像＆＃39; em＆＃39;或者＆＃39; rem＆＃39;而不是＆＃39;％＆＃39;或者＆＃39; px＆＃39;使文本响应。

顺便提一下16px = 1em或1rem。欲了解更多信息，请进一步了解css units＆＃39; rem＆＃39;和＆＃39; em＆＃39;。

所以你应该使用：

font-size: 1rem; 

//or 

font-size = 1em;

.competitive {

    position: absolute; // use relative instead of absolute to make class'competitive' relative to parent.
    display: inline-block;
    bottom: 80%;
    font-family: 'museo_slab500';
    font-size: 3em;  // Or use 'rem' to make text responsive.
    color: #fff;
    padding: 0 20px;
    width: 50;
    line-height: 150%;
}

Answer 2

我做了这个jsfiddle示例，以便在我理解的情况下展示您的问题。由于您的问题太模糊，无法理解，这可能不是您想要的解决方案。此外，这不是一个完整的答案，只是让你开始的事情。

我认为你想要的是保持文本3 Tiered Quality Review Process保持在顶部的栗色图像上，即使窗口大小已经改变。

如果你不想要这个解决方案，请提醒我。请更改您的问题，以便其他用户正确理解。

你在jsfiddle中看到的答案是这个javascript，它将你的竞争容器调整到你的支票div。

window.onresize = resizeText;

function resizeText()
{
    var heightPercentage = 10; //Make the height 10% of parent
    var widthPercentage = 100; //Make the width 100% of parent i.e. full width

    var parentHeight = $(".checks").height();
    var parentWidth = $(".checks").width();

    $(".competitive").css("height", parentHeight * (heightPercentage / 100) + "px");
    $(".competitive").css("width", parentWidth * (widthPercentage / 100) + "px");
}

然后我在你的css中包含了一堆这些行@media all and (min-width: 50px) { body { font-size:5px; } }来根据窗口大小调整字体大小。你可以玩这个并添加更多这些来涵盖所有可能的情况。请注意，这取决于窗口的最大值和最小高度/宽度。

同时检查与您的问题（IMO）密切相关的this答案

我还强烈建议将bootstrap用于任何响应式CSS。

Answer 3

.checks { 
  position: relative; 
  display: inline-block;
  height: auto;
  max-width: 50%;    
}



.competitive {
  position: absolute;
  display: inline-block;
  bottom: 80%;
  font-family: 'museo_slab500';
  font-size: 150%;
  color: #fff;
  padding: 0 20px;
  width: 50;
  line-height: 150%;
}

<div class="checks">
  <img src="http://jqlconsulting.com/wp-content/uploads/2015/06/forcheckmarks2-Converted.png" alt="" style="max-    width:100%"/>
  <h2 class="competitive"><span>3 Tiered Quality Review Process</h2></span>
</div>

针对响应式图像制作响应式文本？

3 个答案: