Question

我有一个带有响应背景图像的父div。在父div中，我有一个带有一些文本的子div。我希望子div中的文本和子div本身也能响应。

不想使用table属性执行此操作。还有其他解决方案吗？

Answer 1

演示 - http://jsfiddle.net/victor_007/xb548oqt/2/

使用<img>代替background-image

＆＃13;

.parent {
  position: absolute;
  width: 100%;
  height: auto;
}
.parent img {
  width: 100%;
  height: auto;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  transform: translate(-50%, -50%);
  background-color: orange;
  padding: 1.2em;
  font-size: .5em;
}

＆＃13;

<div class="parent">
  <img src="http://i42.photobucket.com/albums/e340/BillysGtr_Nakos/m_zps8802bbe3.jpg" />
  <div class="child">
    <h2>some text</h2>
  </div>
</div>

＆＃13;

Answer 2

我不太确定，你的问题是什么，但只要你不使用像white-space: nowrap;这样的东西，DIV和某些文字应默认响应。只需将DIV设置为width: 100%;（这是默认值），您应该没问题。

Answer 3

我不确定你的意思是什么，但是看看你的例子，我认为你可能正在寻找background-size: cover;。这样的事情：http://jsfiddle.net/xb548oqt/1/

如何使内部div与文本响应

3 个答案: