css - 如何在容器中垂直和水平居中 img - img 可能比容器大

Question

我有一个包含图像的容器，该图像是从应用程序加载的，因此容器的尺寸是已知的，而图像会有所不同。

我目前有以下 css:

#secondary_photos {
  height: 100px;
  width: 300px;
  overflow: hidden;
}

#secondary_photos .small_photo {
  float:left;
  height: 100px;
  width: 300px;
}

#secondary_photos .small_photo img{
  height: 100%;
  width: auto;
  position: absolute;
  bottom: 0px 
}

#secondary_photos .small_photo img{
  height: auto;
  width: 100%;
  position: absolute;
  bottom: 0px 
}

这对我来说“没问题”:它加载图像，调整它的大小以占据容器宽度的 100% 并定位它，以便图像的下半部分显示在容器内 - 所以如果图像结束将宽度调整为 300px 后向上 200px 高，仅显示图像底部的 100px(任意设置)。

我想要做的是始终显示图像的中间 - 因此在上面的示例中，图像将显示 50-150 像素(从顶部开始)..

Answer 1

因为听起来您不知道页面加载时的图像大小，您可以使用 dead centre 的组合和 javascript 做你想做的事。流程如下:

1. 像死点示例中那样设置标记。
2. 加载图像时，获取其宽度和高度。
3. 将图像左边距设置为 (图像宽度/2 * -1)。
4. 将图像顶部设置为(图像高度/2 * -1)。

由于您可能还拥有比容器更大的图像，因此您可以为此添加条件检查:

// Get DOM elements
var container = document.getElementById('container');
var image = document.getElementById('img');

// Check they're good
if(container && img){
  var height = image.height;
  var width = image.width;

  // Horizontally centre if container is wider than image
  if(container.offsetWidth > width){
    image.style.marginLeft = Math.floor((width / 2 * -1)) + "px";
  }

  // Vertically centre if container is taller than image
  if(container.offsetHeight > height){
    image.style.top = Math.floor((height / 2 * -1)) + "px";
  }
}