Посмотрите на центр изображения с помощью CSS

Question

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

код, подобный следующему:

    .center {
      position: relative;
      margin-left: auto;
      margin-right: auto;
    }

<img class="center" src="picture.jpg">

не помогает.

Я не могу найти правильное решение.Использование изображения в качестве фона CSS не помогло бы, так как я хочу динамически изменять изображения.

Возможно ли это сделать с помощью CSS?Или я должен использовать JavaScript?

Спасибо за чтение!

Answer 1

Используйте фоновое изображение. Вы можете изменить это не только с помощью CSS (псевдо: hover), но также (и более эффективно) с помощью JavaScript.

.center {
    background: transparent url('/path/to/image') center center no-repeat;
    width: 100%;
    height: 100%;
}
.center:hover {
    background: transparent url('/path/to/another/image') center center no-repeat;
}

JavaScript (jQuery)

$('.center').css('background-image','url(/path/to/image)');

Answer 2

Немного опоздал на вечеринку, но я думаю, что это то, что вы хотите:

.center {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
}

Answer 3

Как насчет использования Top: 50% и Left: 50% в вашем CSS для позиционирования к середине изображения?