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的组合来做你想要的。流程如下：

在死点示例中设置标记。
加载图像时，请获取其宽度和高度。
将图像边距设置为(image width / 2 * -1)。
将图片顶部设为(image height / 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";
  }
}

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

1 个答案: