javascript - 用 div 包围响应图像

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 应该随着图像的变化而增长和缩小，同时考虑视口(viewport)大小的变化以及实际图像大小。

这是否可以仅使用 CSS 来实现，还是我必须涉及 javascript？

这里是起点 jsfiddle .我有意省略了周围的三个 div，因为在 DOM 中的位置对我来说并不重要。

Answer 1

我认为您需要为左、右和底部元素保留一些空间。

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

希望这就是您要找的:http://jsfiddle.net/6q4Ls/2/拖动分隔符以查看元素如何 react 。

---

另一个使用容器外部元素的解决方案，看起来更简单: 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;
}