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

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

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

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

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

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

Отредактировать страницуВот.

Ответы на вопрос(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">
       <img src="..." class="">
   </div>
</div>

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

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

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

 Max Oriola05 дек. 2016 г., 10:16
Я бы рекомендовал это решение, если изображение чисто декоративное.background-position: 50% 50% везде отлично работает.

margin-left а такжеmargin-right на изображении до.-100%

Вот'сjsFiddle демонстрируя это. (используйте нижеприведенныйлучше)

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

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

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

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

Мы перепроверили вторую скрипку ... в 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>

 Dave Hilditch20 июн. 2014 г., 19:33
+10 Это полностью работает и сохранило переписывание базового HTML.
 Max Oriola04 апр. 2016 г., 08:26
Тестирование в Chrome, это работает, только если вы неt установить ширину изображения и атрибуты высоты.
 Jeff Huijsmans20 дек. 2016 г., 16:12
Также работает над текстовыми элементами (как)span
 MadOgre22 дек. 2015 г., 07:35
Я бы хотел, чтобы был способ добавить ответы в закладки. Это один из тех редких драгоценных камней, которые не документированы и экономят часы работы. Постскриптум ИМО, это должен был быть принятый ответ.
 Mathijs Flietstra10 мая 2016 г., 22:48
@MaxOriola, можешь уточнить? Я нене наблюдать разницу в поведении междуэта скрипка (с установленными атрибутами ширины и высоты изображения) и указанными в ответе. Поэтому я думаю, что в Chrome он работает нормально, независимо от того, установлены ли у вас атрибуты ширины и высоты изображения ...
 Max Oriola14 мая 2016 г., 08:25
Извините, я тестировал вне jsFiddle и могут воспроизвести это. Вероятно, используя первую скрипку с очень широким изображением. Я'Мы повторно протестировали вторую скрипку (с полем: 0 -9999% 0 -9999%) в Firefox, Chrome, Safari (последние версии) и Explorer 8, 9,10. Хорошо работает во всех из них. Благодарю.
 jmarceli06 авг. 2015 г., 11:09
Кто-нибудь знает диапазон поддерживаемых браузеров?

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

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

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

 Max Oriola10 апр. 2016 г., 19:48
Вы должны также включить-webkit-transform css свойство, чтобы оно работало на iOS.
 Ronen Festinger31 окт. 2016 г., 08:37
Отлично, работает с видео тоже.
Решение Вопроса

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

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

 Nathaniel18 сент. 2009 г., 06:20
Отмечать ответ, потому что он в основном охватывает оба представленных ответа. не мог»не работает с фоновым методом, и нетВы уверены в абсолютном позиционировании. Спасибо хоть.
 Johno07 июн. 2012 г., 13:07
+1, потому что первое решение также будет работать для не-изображений. Вопрос указывает на изображения, но я пришел сюда, чтобы отцентрироватьdiv в слишком маленьком контейнере. Благодарю.
 John13 авг. 2015 г., 10:08
ссылка кажется неработающей нашел его здесьw3schools.com/cssref/pr_background-position.asp Теперь решение былофон положение: центр;» Спасибо

Ваш ответ на вопрос