2

我终于遇到了我的 search-fu 不够的问题。我做了一些固定高度和宽度的画廊轮播，里面有图像列表（一次显示一里）。图像在相对元素margin:auto内绝对定位（使用等） 。li

图像通常比具有overflow:hidden. 图像具有max-width:100%它创造了一种理想的效果，即较小的图像在容器中居中，较大（较高）的图像被裁剪，可以打开以获得完整版本。

.gallery-items>li {
padding:0;
margin:0;
width:100%;
height:100%;
text-align:center;
position:relative;
overflow:hidden;
}
.gallery-items>li img {
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
max-width:100%;
max-height:none;
height:auto;
width:auto;
position:absolute;
}

在这里摆弄http://jsfiddle.net/fW63c/1/

它在 IE8、IE9、Opera 12/15、Chrome 中效果很好（图像的中心在容器的中心），但在 Firefox 中，较大的图像从容器的开头开始（就像它本来的那样top:0。有人知道吗？如何使它在 FF 中工作（最好只使用 css）。提前感谢任何解决方案，Fafel

4

2 回答 2

1

如果您不必支持 IE8 或更早版本，最好的方法是垂直转换图像。此方法适用于所有主流浏览器，包括 IE9+：

img {
  top: 50%;
  transform: translateY(-50%);
}

https://jsfiddle.net/6n2vu7zd/1/

于 2015-05-13T15:26:33.650 回答
1

这个一直困扰着我，但最终我找到了这个设置top: -100%;并且bottom: -100%;会产生预期的效果。

通常，以下将正常工作：

.child {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

但是在 Firefox 中，如果父级没有子级那么高，它会简单地决定将它们对齐在顶部。但这会起作用：

.child2 {
    position: absolute;
    left: 0;
    right: 0;
    top: -100%;
    bottom: -100%;
    margin: auto;
}

我创建了一个演示来演示：

有两个例子，第一个在 Firefox 中会出错，但在 Chrome、Edge 和 IE 中看起来都很好。

.child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.child2 {
  position: absolute;
  left: 0;
  right: 0;
  top: -100%;
  bottom: -100%;
  margin: auto;
}

.parent {
  margin: 30px;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 25px;
  background-color: yellow;
}
<div class="parent">
  <img width="75" heigh="75" class="child" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>

<div class="parent">
  <img width="75" heigh="75" class="child2" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>

于 2017-03-12T19:00:03.060 回答