Question

我想达到如下效果

图像应具有固定的宽度/高度比，最好使用百分比而不是rem或em，因为它们需要排成一行并完全适合容器内。

图像下面应该有一行文字。这是我到目前为止所得到的：

<div class="wrapper">
  <div class="image"></div>
  <p>hi there</p>
</div>

.wrapper {
  width: 20%;
  height: 0;
  padding-bottom: 8%;
  background: lightpink;
  position: relative;
}
.image {
  width: 100%;
  height: 100%;
  background-image: url('http://lorempixel.com/g/400/200');
  background-size: cover;
}

Answer 1

您的链接不起作用。但是尝试使用1-100vh。 vh是用户窗口的百分比，因此它将缩放并修复。

Answer 2

我的方法如下。 HTML

<div class="wrapper">
    <div class="image"><img src="http://lorempixel.com/g/300/400" /></div>
  <p>hi there</p>
</div>

CSS

.wrapper {
  width: 20%;
  padding: 20px;
  background: #fff;
}
.image img {
  max-width: 100%;
}
p {
    font-size: 24px;
    text-align: center;
}

JSfiddle

具有固定宽度/高度比的流体图像

2 个答案: