Центрировать изображение в div слишком мало для него?

Ответ 1

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

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

Ответ 2

Вы можете сделать это, установив margin-left и margin-right на изображение в -100%.

Здесь показан jsFiddle. (используйте ниже, вместо этого лучше)

Еще лучшая идея - установить margin-left и margin-right на изображение на гораздо большее отрицательное число, например. -9999%, как и при значении -100%, изображение начинает смещаться не по центру, как только элемент, содержащий div, становится менее шириной, чем в 3 раза больше ширины div:

margin-left: -100% + the div width: 100% + margin-right: -100% = 3x div width

Вы можете проверить разницу в поведении между этим jsFiddle и предыдущим один, переключая переполнение на видимое и изменяя размер окна результатов до 300% ширины div.

Цитирование @MaxOriola в диапазоне поддерживаемых браузеров (из комментариев):

Я повторил вторую скрипку... в Firefox, Chrome, Safari (последние версии) и Explorer 8, 9, 10. Работает хорошо во всех них.

Примечание. Элемент изображения должен отображаться inline или inline-block и центрирован по горизонтали с помощью text-align: center (на оберточном элементе).

// ALL of the JS below is for demonstration purposes only

$(document).ready(function() {
  $('a').click(function() {
    $('body > div').toggleClass('overflow');
  });
})

img {
  margin: 0 -9999% 0 -9999%;
}


/* ALL of the CSS below is for demonstration purposes only */

body {
  text-align: center;
  font-family: verdana;
  font-size: 10pt;
  line-height: 20pt;
}

body>div {
  margin: 0px auto;
  width: 40%;
  background-color: lightblue;
  overflow: hidden;
}

img {
  vertical-align: top;
}

.overflow {
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>40% wide div [<a href="#">toggle overflow</a>]
  <div>
    <img src="http://lorempixel.com/400/200" />
  </div>
  400px wide image
</div>

Ответ 3

Использование css transform для изображения внутри контейнера с overflow: hidden и ширины набора:

img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block; /* optional */
}

jsFiddle здесь (я заимствовал часть Mathijs Flietstra jsFiddle, так спасибо).

Ответ 4

рассмотреть возможность использования изображения в качестве фона;)

используйте background-position, чтобы получить то, что вы хотите.

вам может понадобиться решение javascript для достижения согласованных результатов кросс-браузера.

Ответ 5

Я нашел другое решение

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-100%; 
        width:300%;
     }
     .image{
        width: 800px; //your image size 
     }           
</style>

и в теле

<div class="container">
   <div class="containerSecond">
       <image src="..." class="" />
   </div>
</div>

Это центрирует ваше изображение, когда ваш контейнер больше или меньше. В этом случае ваше изображение должно быть больше 300% контейнера, чтобы его не центрировали, но в этом случае вы можете сделать с containerSecond больше, и он будет работать