Question

我有一个想要居中在div中间的图像，div可以根据窗口的大小增长和缩小，图像的大小也可以不同，并且不应该大于周围的div。

我设法通过使用以下HTML来实现此目的：

<div class="imgspace">
  <img src="/variable.jpeg">
</div>

CSS：

.imgspace {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; 
  right: 0;
}

.imgspace img {
  position: absolute;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

现在我想为图像实现一组简单的控件。它们应该围绕左侧，底部和右侧的图像布置在三个div中。 div会随着图像的变化而增大和缩小，同时考虑视口大小的变化以及实际的图像大小。

这可能只使用CSS实现还是我必须涉及javascript？

这是起点jsfiddle。我故意遗漏了三个周围的div，因为DOM中的位置对我来说无关紧要。

Answer 1

我认为你需要为左，右和底元素保留一些空间。

在我的示例中，我为#left和#right元素保留了10％，img的宽度为80％。此外，#bottom元素保留10％的高度。

希望这就是您所寻找的：http://jsfiddle.net/6q4Ls/2/ 拖动分隔符以查看元素的反应方式。

使用容器外部元素的另一种解决方案，似乎更简单： http://jsfiddle.net/6q4Ls/5/

修改使用固定大小http://jsfiddle.net/6q4Ls/9/

这可能不适用于所有浏览器，因为我使用的是calc()函数。

div.imgspace img { position: absolute; margin: auto; max-width: calc(100% - 200px); max-height: calc(100% - 100px); top: 0; right: 100px; bottom: 100px; left: 100px; }

使用div环绕响应式图像

1 个答案: