将图像置于灵活容器中

Question

现在已经玩了一段时间试图让它工作，所以我已经设置了CodePen并希望你们可以提供帮助：

CODEPEN

我需要height width .container指定百分比而不是静态像素宽度以适应我的设计并保持流畅和响应。

在笔中移除.container上设置的像素尺寸，您将看到会发生什么。

有没有办法可以做到这一点？

Answer 1

对于现代浏览器，您可以使用绝对定位和transform来定位图像

.container
  width: 50% 
  height: 50%

  background-color: #ebebeb
  position: relative

img
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)

http://codepen.io/gpetrioli/pen/KnHod

演示

Answer 2

希望它有助于兄弟。检查一下，我用background-image做了。

JSFiddle

---

玩得开心＆gt;：D