Question

问题示例可以在这里看到http://codepen.io/anon/pen/EDgiz。

正如您所看到的，正方形（1：1）比例元素定位非常精细。但另外两个 - 不是。

是否有针对此类情况的纯CSS解决方案？

如果没有，你能提出什么样的温和解决方案？因为我实际上可以手动定位那些带有javascript的人，但我认为这或多或少是一种肮脏的解决方案。

Answer 1

在这里找到了一个非常精细的解决方案：http://www.paulund.co.uk/absolute-center-images-with-css，使用transform：translate（）函数

所以我的最后一个例子看起来像这样 - http://codepen.io/anon/pen/EDgiz：

img{
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

为我工作很棒

中心绝对定位元素取决于图像比率

1 个答案: