Вертикальное и горизонтальное центрирование изображения с переменным размером (в div) только с использованием CSS и HTML

Question

Итак, целую вечность я пытался достичь этого. В основном мой сайт позволяет администратору загружать уменьшенное изображение и изображение для каждого элемента в каталоге. Миниатюра отображается на странице, которую видит клиент, а увеличение отображается при наведении миниатюры.

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

Я бы хотел расположить это вертикальное и горизонтальное увеличение этого изображения. Содержится в div с position: fixed;. Я полагаю (хотя у меня нет кода передо мной в настоящее время), что я в настоящее время использую что-то вроде следующего:

.image-enlargement
{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 400px;
    margin-left: -150px;
    margin-top: -200px;
}

Я может изменил его на использование jQuery - хотя я не могу вспомнить, это было так давно, когда я последний раз работал над этим кусочком сайта. Теперь, что я хотел бы сделать с приведенным выше кодом, так это убрать спецификации ширины, высоты и полей, чтобы обеспечить точное центрирование изображения, независимо от его размера или размера, без использования JavaScript.

Кто-нибудь когда-либо достигал этого раньше? Если так, то как? Я уверен, что должен быть какой-то способ достичь этого результата, но мы не сталкивались с чистым решением CSS / HTML.

Редактировать: JSFiddle на http://jsfiddle.net/Y7xAp/.

Answer 1

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

#container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url('myImage.jpg') center center no-repeat;
}

После этого браузер правильно рассчитает положение изображения по центру по вертикали и горизонтали.Затем поместите событие на onClick или что-то в этом роде, чтобы определить, когда они хотят, чтобы изображение исчезло.

Answer 2

Лучший способ центрировать делители по горизонтали и вертикали с помощью CSS - использовать flex-box.

Использовать display: flex для контейнера и margin: auto для внутреннего элемента.

Помните: это хорошее решение для новых браузеров, и контейнер должен иметь и высоту для отображения: flex работает правильно. В этом случае я использую модуль vh / vw (1/100 высоты / ширины области просмотра).

Попробуйте использовать это:

.image-enlargement {
    position: relative;
    display: flex;
    width: 100vw;
    height: 100vh;
}

.image-enlargement img {
    margin: auto;
}

Чтобы узнать больше о модулях flex-box и vw / vh, прочитайте:

• https://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /
• http://www.w3schools.com/cssref/css_units.asp & https://css -tricks.com / the-lengths-of-css /

Answer 3

Если бы вы могли опубликовать свою наценку здесь, это было бы здорово, чтобы мы могли помочь вам лучше.Что касается размера элемента изображения, вы можете указать его ширину и высоту, чтобы при любом размере загружаемого пользователем изображения оно оставалось одинаковым.Вы можете сделать это так, <img src="<image url>" height="100" width="100"/>