响应 - 图像上的文字

Question

我有响应式设计的问题。我尝试在图像框中显示文本，但是当我调整浏览器文本时，框外。

我的照片：

.row6 {
  background: none;
  width: 100%;
  height: 130px;
  border: 0px salmon dotted;
  font: bold 1.7vw arial, sans-serif;
  margin: 20px auto;
}

.row6 > div {
  position: relative;
  top: 8px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url(images/background.png) no-repeat;
  background-size: 100%
}

#dd7 {
  margin-left:44.7%;
  width:45px;
  text-align:center; 
  padding-top:0.7%
}

HTML code：

<div class="row6">
  <div>
    <div>
      <div id="dd7">TEXT</div>
    </div>               
  </div>
</div>

我应该做些什么才能让文字始终在图像上的正确位置？

Answer 1

The problem is you're using a fixed width ({% extends viewOnly == false ? ... %} ) for your text. Try using a percentage width instead:

{{ form_start(form, { 'style': 'horizontal', 'col_size': 'sm' }) }}
    {% if form.documents is defined %}
        {{ form_row(form.documents) }}
    {% endif %}

    {{ form_row(form.submit, { 'attr': { 'class': 'btn btn-success' } }) }}
{{ form_end(form) }}

https://jsfiddle.net/pnzLn2no/1/

Answer 2

Try this fiddle

/usr/lib/apache2/modules/mod_wsgi.so
/usr/lib/apache2/modules/mod_wsgi.so-2.7