Вопрос по image, css, html, center – Сосредоточить изображение в div слишком мало для него?

13

Так что у меня есть 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   ответов
2

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

2

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

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

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

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>

+10 Это полностью работает и сохранило переписывание базового HTML. Dave Hilditch
Тестирование в Chrome, это работает, только если вы неt установить ширину изображения и атрибуты высоты. Max Oriola
Также работает над текстовыми элементами (как)span Jeff Huijsmans
Я бы хотел, чтобы был способ добавить ответы в закладки. Это один из тех редких драгоценных камней, которые не документированы и экономят часы работы. Постскриптум ИМО, это должен был быть принятый ответ. MadOgre
5

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

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

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

Вы должны также включить-webkit-transform css свойство, чтобы оно работало на iOS. Max Oriola
Отлично, работает с видео тоже. Ronen Festinger
26

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

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

Отмечать ответ, потому что он в основном охватывает оба представленных ответа. не мог»не работает с фоновым методом, и нетВы уверены в абсолютном позиционировании. Спасибо хоть. Nathaniel
+1, потому что первое решение также будет работать для не-изображений. Вопрос указывает на изображения, но я пришел сюда, чтобы отцентрироватьdiv в слишком маленьком контейнере. Благодарю. Johno
ссылка кажется неработающей нашел его здесьw3schools.com/cssref/pr_background-position.asp Теперь решение былофон положение: центр;» Спасибо John

Похожие вопросы