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

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

13 голосов
/ 28 августа 2009

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

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

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

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

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

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

Ответы [ 5 ]

32 голосов
/ 20 мая 2013

Вы можете сделать это, установив 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>
26 голосов
/ 28 августа 2009

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

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

5 голосов
/ 04 апреля 2016

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

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

jsFiddle здесь (я позаимствовал часть jsFiddle у Матисса Флиштры, так что спасибо).

2 голосов
/ 03 августа 2013

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

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

2 голосов
/ 28 августа 2009

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

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

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

...