Question

我有固定比例的图像，我想用一个带有标题的宝丽来风格图形将它们包装起来。总图像应占据屏幕垂直高度的约60％，宽度应相应缩放。

标记

<span>
    <img src="https://placekitten.com/g/320/320">
    <div>Kitler, 1978</div>
</span>

CSS

span {
  border: none;
  height: 60vh;
  position: absolute;
}

span img {
  background-color: #333;
  border: 1rem solid white;
  padding: 0;
  height: 100%;
}

span div {
  background-color: white;
  border: 1rem solid white;
  font-size: 2rem;
  color: #333;
  text-align: left;
  margin-top: -1rem;
  height: 2rem;
  padding: 0.5rem;
}

示例here

不幸的是，当窗口垂直变窄时，它同样会扭曲图像，当窗口水平变窄时，图像的大小与标题的大小不同步。

这是什么原因？有没有解决方案？

Answer 1

只需将身高添加到img而不是span，然后添加width: auto。

此外，我将背景放在跨度中并使图像居中以改善可视化效果。

span {
  border: none;
  position: absolute;
  background-color: white;
  text-align:center;
}

span img {
  background-color: #333;
  border: 1rem solid white;
  padding: 0;
  height:55vh;
  position:relative;
  width:auto;
}

span div {
  border: 1rem solid white;
  font-size: 2rem;
  color: #333;
  text-align: left;
  margin-top: -1rem;
  height: 2rem;
  padding: 0.5rem;
}

CSS Polaroid风格图像/字幕缩放问题

1 个答案: