Центрируйте большое изображение неизвестного размера внутри меньшего div с переполнением скрытого

Я хотел бы центрировать img внутри div без javascript и без фоновых изображений.

Вот пример кода

<div> 
    <img src="/happy_cat.png"/> 
</div>
  • Я не знаю размер img, и он должен иметь возможность превышать ширину родительского
  • Я не знаю ширину родительского div (это 100%)
  • Родительский div имеет фиксированную высоту
  • Изображение больше родительского и родительский имеет переполнение: hidden
  • Только для поддержки современных браузеров

Желаемый результат. (Игнорируйте непрозрачность и т.д., Просто обратите внимание на позиционирование).

enter image description here

Я знаю, что это можно легко сделать с помощью фоновых изображений, но это не вариант для меня. Я мог бы также использовать javascript, но это похоже на очень тяжелый способ добиться этого.

Спасибо!

Джек

Ответы

Ответ 1

Как насчет этого:

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

Это предполагает, что родительский div расположен относительно. Я думаю, что это работает, если вы хотите, чтобы .IMG был относительно позиционирован, а не совсем. Просто удалите position: absolute и измените верхнюю/левую сторону на margin-top и margin-left.

Возможно, вам захочется добавить поддержку браузера с помощью transform, -moz-transform и т.д.

Ответ 2

Старый вопрос, новый ответ:

Когда изображение больше, чем оберточный div, выравнивание по центру: центр или маржа: авто не будет работать. Но если изображение меньше, то решения с абсолютным позиционированием или отрицательным левым полем будут создавать странные эффекты.

Итак, когда размер изображения на самом деле не известен заранее (например, на CSM), и он может быть больше или меньше, чем div для обертывания, есть элегантное решение CSS3, которое служит всем целям:

div {
    display: flex;
    justify-content: center;
    height: 400px; /* or other desired height */
    overflow: hidden;
}
img {
    flex: none; /* keep aspect ratio */
}

Обратите внимание, что в зависимости от других правил в таблице стилей вам может потребоваться добавить ширину: auto и/или max-width: none к img.

Ответ 3

Это всегда немного сложно, и есть много решений. Я считаю, что лучшим решением будет следующее. Это центрирует его как по вертикали, так и по горизонтали.

CSS

#container {
    height: 400px;
    width: 400px;
}
.image {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left {
    width: 100px;
    height: 100%;
    z-index: 2;
    background: white;
    top: 0px;
    position: absolute;
    left: 0px;
}
.right {
    width: 100px;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: white;
    top: 0px;
    right: 0px;
}
.image img {
    margin: auto;
    display: block;
}

HTML

    <div id="container">
<div class="image">
    <div class="left"></div>
    <div class="right"></div>
    <img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>

См. скрипку

несколько другой метод: Fiddle

Ответ 4

Спасибо всем за вашу помощь. Я собираюсь считать это недостижимым только в CSS.

Я перейду к решению jQuery. Вот несколько [псевдо] кода для заинтересованных.

Я собирался отказаться от решения CSS, но похоже, что это можно сделать (см. принятый ответ). Вот решение JS, с которым я собирался пойти.

var $img = $('img'),
    w = $img.width();

$img.css({marginLeft: -w});

И сопровождающий css

img{
  position:absolute;
  left:50%;
}

Ответ 5

Я знаю, что это старо, но я также придумал чистое решение css, очень похожее на приведенное выше.

.parent {
    float: left;
    position: relative;
    width: 14.529%; // Adjust to your needs
}

.parent img {
    margin: auto;
    max-width: none; // this was needed for my particular instance
    position: absolute;
    top: 11px; right: -50%; bottom: 0; left: -50%;
    z-index: 0;
}

Ответ 6

Просто выполните инициализацию положения изображения следующим образом.

HTML:

<div> 
    <img id="img" src="/happy_cat.png"/> 
</div>

CSS:

#img {
    left: 0;
    right: 0;
}

Или посмотрите с margin: auto;

Это для горизонтального выравнивания. Чтобы выровнять его по вертикали, вы можете сделать display: table-cell; на <div> а затем vertical-align: middle;, но это не очень хорошая практика, потому что ваш <div> не является таблицей.