Вертикальное центрирование изображения в меньшем делении (несколько масштабированных изображений, несколько делений)

0

У меня два изображения. Один - 630x419; другой - 200x300.

Я каждый из этих изображений отображается внутри контейнера div с фиксированной шириной на контейнере. Я масштабирую изображения до ширины: 100% внутри контейнера div. Оба изображения масштабируются, чтобы заполнить ширину div, но изображение, которое выше его ширины (200x300), переполняется ниже нижней части контейнера div. Я установил переполнение в скрытое, но то, что я хотел бы сделать, - это вертикальное центрирование изображения в div, чтобы я мог видеть центр изображения вместо верхней части изображения, не испортив масштабирование или отображение первого образ.

Пример JSFiddle здесь: http://jsfiddle.net/P7xNg/1/

.container {
  padding: 9px;
  border: 1px solid #B8B8B8;
  width: 262px;
  margin: 10px;
}

.container img {
  display: block;
  width: 100%;
}

.image-box {
  overflow: hidden;
  height: 172px;
}
<div class="container">
  <div class="image-box">
    <img src="http://i.imgur.com/lG43Qgd.jpg" />
  </div>
</div>

<div class="container">    
  <div class="image-box">
    <img src="http://i.imgur.com/bMfYu6M.jpg" />
  </div>
</div>
Теги:
image
vertical-alignment

4 ответа

0
Лучший ответ
.image-box {
    overflow: hidden;
    height: 172px;
    position: relative;
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;

}
.image-box img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

http://jsfiddle.net/P7xNg/2/

Поделиться
  • 0
    С этим методом вы наверняка будете скрывать нижнюю часть изображения, а не верхнюю?
  • 0
    Это действительно сработало. Именно то, что я хотел сделать. Второе изображение центрируется по вертикали, а верхнее изображение не изменяется даже при применении одного и того же CSS к каждому изображению. Спасибо!
0

Один из вариантов - использовать изображение в качестве фона для вашего .image-box а не включать <img> в качестве дочернего элемента .image-box. Вам просто нужно установить:

  • background-image: url(blah);
  • background-size: 100%;
  • background-position: center center;

Однако полученный HTML не так чист, как это, вероятно, потребует некоторых встроенных стилей, которые, как правило, не самые лучшие.

Jsfiddle.

Поделиться
  • 0
    Спасибо за это предложение. Я видел, где background-image использовался в нескольких других примерах, но это выглядело грязно. Если это то, к чему это приведет, я пойду по этому пути.
0

Вы имеете дело с двумя очень разными ориентациями изображения. Первый - ландшафт в природе, а весы - тонкие, учитывая сделанный вами контейнер. Второй - портрет в природе, и высота/ширина затрудняют установку контейнера для него.

Там нет ни одного набора стилей, которые я могу видеть, чтобы они работали так, как вы хотите (если вы не обрезали изображение # 2 в ландшафтную ориентацию в графическом редакторе).

Добавьте несколько встроенных стилей CSS на свое второе изображение (в HTML):

<div class="container">    
    <div class="image-box">
        <img src="http://i.imgur.com/bMfYu6M.jpg" style="margin-top:-120px;"/>
    </div>
</div>

Это помогло мне.

Если вы обнаружите, что у вас есть много таких "портретных" образов, то это может стоить вам при создании класса в вашем CSS, например, как.img-портрет или что-то еще, и применять его к тем, с которыми у вас возникают проблемы, избавите вас от всех встроенных стилей, которые вам нужно будет сделать:

Как <img src="http://i.imgur.com/bMfYu6M.jpg" class="img-portrait"> или что-то подобное.

Поделиться
  • 0
    Более общая версия CSS будет выглядеть так: margin-top: -50%;
  • 0
    Это отлично работает для второго изображения, но если я применяю тот же встроенный стиль к первому изображению, оно почти полностью удаляет изображение из контейнера.
Показать ещё 2 комментария
0

Хорошее простое решение для вас здесь.

Все, что вам нужно сделать, это вместо использования тега img создать div с размером, которым вы хотите, чтобы изображение было. Например; 200px x 200px. Затем выделите изображение, которое вы хотите использовать в качестве фонового изображения для этого div, а затем, например, сметите изображение с помощью -100px.

Ниже приведен пример:

<div class="container">    
    <div class="image-box">
        <div style="width:100%;height:200px;background-image:url(my-image.jpg);background-repeat:no-repeat;background-position:-100px 0px;
    </div>
</div>

Надеюсь, это поможет!

Поделиться
  • 0
    Спасибо за это. Фоновое изображение было одним из элементов, упомянутых в моем поиске до публикации моего вопроса. Это кажется довольно многословным, но я могу погрузиться в это решение, если это все, что я могу сделать.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню