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

Question

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

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

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

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

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

Редактировать:Страница здесь.

Answer 1

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

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

Answer 2

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

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

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

margin-left: -100% + the div's 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://via.placeholder.com/400x200" />
  </div>
  400px wide image
</div>

Answer 3

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

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

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

Answer 4

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

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

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

Answer 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, и это сработает