Question

我有一张背景图片，我要在右下角附近贴一张推荐书。我很难通过响应式设计使其正常工作。所以我有一个930x454的图像，我想展示整个图像。我试图设置一个最小宽度和最小高度，并可以让它工作，但当我缩小窗口时，它然后比屏幕宽。理想情况下，我希望图像不超过屏幕尺寸的100％宽度。内容只有3个句子，所以甚至没有接近930x454。

我是否需要编写一个resize函数或者是否有一个相当简单的css解决方案。

Answer 1

这里有两个关键概念： positionin g（在这种情况下，父级的 relative 和文本框中的绝对），以及背景尺寸。我会把它留给谷歌那些人。

＆＃13;

.background {
  background-image: url('http://lorempixel.com/930/454/nature');
  background-size: cover;
  height: 0;
  padding-bottom: 56.25%;
  max-width: 100%;
  position: relative;
}
.text {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: rgba(255,255,255,.3);
  padding: 20px;
}

＆＃13;

<div class="background">
  <div class="text">Some text.</div>
</div>

＆＃13;

Fiddle demo

Answer 2

不需要任何js只需在（％）中键入所需的宽度，即width: 100%;它将正常工作并确实给出一些高度，因为当宽度缩小时高度也将缩小

Answer 3

使用元标记代码获取设备宽度并将其绑定到内容。将其添加到标题中。不要忘记html标记括号。

meta name =“viewport”content =“width = device-width，initial-scale = 1”

如果您希望这样，请将图像设置为100％。上面的代码应该保持所有响应。

CSS与背景图像和一些内容

3 个答案: