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

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

text-align: center; margin-left: -15px; margin-right: -15px; overflow: hidden;

Как вы можете видеть, у меня есть text-align: center; on, что, если бы изображение было достаточно маленьким для div, центрируйте изображение. Но процентная ширина div определенно не будет достаточно большой на моем экране 1280x800.

Отрицательные поля - это преодоление некоторого дополнения на нем parent div. overflow:hidden делает вещи похожими на меня, а не грязными. Итак, он работает так, как будто я хочу его, как изображение заголовка на onenaught.com. Он станет более заметным справа, поскольку вы делаете браузер более широким, но не расширяетесь с обеих сторон, потому что он не центрирован.

Итак, мне интересно, есть ли способ центрировать изображение. Знать кого-нибудь?

Изменить: страница здесь.

Ответ 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 больше, и он будет работать