Блог

Мне нужно центрировать изображения, которые будут шире, чем родительский раздел, который их содержит. родительский раздел имеет фиксированную ширину и имеет значение переполнения hidden.

 <div style='overflow:hidden; width:75px height:100px;'>
    <img src='image.jpg' style='height:100px;' />
</div>
  

Я должен использовать изображение в качестве дочернего элемента, потому что мне нужно изменить размеры миниатюр и я не могу полагаться на размер фона, поскольку он не поддерживается в более старых версиях mobile safari, что является обязательным требованием. Я также не могу использовать javascript для этого, поэтому это должно быть решение css.

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

Возможно ли это?

Обновить:

для потомков я только что узнал, что это можно выполнить в старых версиях mobile safari с помощью

 -webkit-background-size:auto 100px; 
  

конечно, фон будет установлен как обычно, используя 50% для позиционирования слева. Если вам это нужно для работы в другом браузере, принятое решение, вероятно, является лучшим, но поскольку этот вопрос был связан с iphone, это решение немного чище.

Насколько вам не нравится дополнительная разметка? Кроме того, есть ли максимальный размер для изображений? Например, если ваша максимальная ширина изображения составляет 225 пикселей, вы могли бы попробовать:

 <div class="frame">
  <div>
    <img src="image.jpg"/>
  </div>
</div>

.frame {
  overflow: hidden; 
  width: 75px;
  height: 100px;
  position: relative;
}
.frame > div {
  position: absolute;
  left: -5075px;
  width: 10225px;
  text-align: center;
}
.frame img {
  height: 100px;
  display: inline-block;
}
  

Пример скрипки здесь:http://jsfiddle.net/brettwp/bW4xD /

Разве использование фонового изображения все еще не сработало бы? Вам не нужно изменять его размер. Имеет ли смысл что-то подобное? http://jsfiddle.net/QHRHP/44 /

 .container{
 margin:0 auto;
 width:400px;
 border:2px solid #000;  
 height:250px;
 background:url(http://placekitten.com/800/250) center top no-repeat;
}
  

Ну, если вы знаете ширину div и ширину изображения, вы можете просто выполнить некоторую математику.

Допустим, div имеет ширину 200 пикселей, а изображение — ширину 300 пикселей:

 div.whatever {
    width: 200px;
}
img.someImg {
    left: -50px;
    position: relative;
}
  

Мы знаем, что поскольку ширина div составляет 200 пикселей, то из изображения будет вырезано 100 пикселей. Если вы хотите центрировать изображение, то 50 пикселей должны быть скрыты за границами раздела с обеих сторон. Таким образом, мы устанавливаем левое положение изображения равным -50px.

Пример (зная размер изображения):http://jsfiddle.net/7YJCD/4 /

Имеет ли это смысл?

Если вы не знаете размер изображения или размер div, вы можете использовать javascript для определения этих значений и сделать то же самое.

Пример (не зная размера изображения, используя jQuery javascript):http://jsfiddle.net/K2Rkg/1 /

Просто для справки, вот исходное изображение.