как центрировать img вертикально и горизонтально в контейнере - img может быть больше контейнера - PullRequest
Новая
       37

как центрировать img вертикально и горизонтально в контейнере - img может быть больше контейнера

1 голос
/ 27 сентября 2011

У меня есть контейнер, который будет содержать изображение, и это изображение загружается из приложения, поэтому размеры контейнера известны, а изображение будет различным.

В настоящее время у меня есть следующее 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% ширины контейнера, и размещает его так, чтобы нижняя половина изображения отображалась внутри контейнера - так что, если изображение заканчивается до 200px высоты после изменения ширины до 300px, отображаются только нижние 100px изображения (произвольная настройка).

Я пытаюсь всегда отображать середину изображения, поэтому в приведенном выше примере изображение будет отображать пиксели 50-150 (сверху).

1 Ответ

1 голос
/ 27 сентября 2011

Поскольку кажется, что вы не знаете размер изображения при загрузке страницы, вы можете использовать комбинацию мертвая точка и javascript, чтобы делать то, что вы хотите.Процесс будет выглядеть следующим образом:

  1. Настройка разметки, как в примере с мертвой точкой.
  2. Когда изображение загружено, получите его ширину и высоту.
  3. Установить изображениеполе слева до (image width / 2 * -1).
  4. Установите для top изображения значение (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";
  }
}
...