Текущее изображение, вертикальное выравнивание (по центру) в пределах ширины жидкости DIV - PullRequest
Новая
       11

Текущее изображение, вертикальное выравнивание (по центру) в пределах ширины жидкости DIV

2 голосов
/ 12 декабря 2011

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

У меня есть DIV, который имеет ширину 100% (для его контейнера, который плавает влево и имеет заданную ширину пикселя) и имеет заданную высоту пикселя. У меня есть изображение внутри, которое я позиционирую как абсолютное, чтобы получить его на фоне контента в DIV. Изображение является жидким с шириной 100%.

Все работает хорошо, но я хочу, чтобы изображение было выровнено по вертикали к середине контейнера, а высота неизвестна.

Вот пример кода, который показывает, что я пытаюсь сделать: 

<div class="container">
  <div class="image-wrapper">
    <img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg" 
       width="100%" />
  </div>
  <p>Some text</p>
</div>

И несколько примеров CSS: 

.container {
  width:100%;
  margin-top:10px;

  height:100px;
  overflow:hidden;
}

.image-wrapper {
  position: relative;
}
.image-wrapper > img {
  position: absolute;
  z-index: -1;
}
p {
  text-align: center;
  padding-top: 10px;
  color:#fff;
  font-weight: bold;
}

Но цветок должен появиться так, чтобы его центр был виден внутри контейнера.

Есть мысли? Я пытаюсь избежать любых размеров Javascript (внешний контейнер, не показанный в этом примере, уже измеряется). Я не против большего количества DIV, таблиц .. что бы вы ни получили!

jsFiddle для демонстрации этого: http://jsfiddle.net/JonMcL/sNz9h/

Ответы [ 3 ]

4 голосов
/ 12 декабря 2011

Почему бы не перейти к свойству background-image? Это позволяет вертикальное центрирование ...

http://jsfiddle.net/urrWS/

2 голосов
/ 29 февраля 2012

Предполагая, что вы хотите только уменьшить изображение и не растягивать его выше исходного разрешения, это должно сработать. Немного JQuery участвует, но это минимально. По сути, это корректирует верхнюю границу IMG для события window.resize.

HTML 

<div id="container">
    <img id="image" src="image.jpg"> <!-- native size is 480x300 -->
</div>

CSS 

#container {
  margin: auto;
  width: 80%;
  height: 300px;
  border: 1px solid gray;
}

#image {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: auto;
}

JQuery 

function adjustImage() {
    $("#image").css('margin-top', ($("#container").height() - $("#image").height()) / 2);
}

$(window).load(function() {
    adjustImage();

    $(window).resize(function() {
        adjustImage();
    });
});
1 голос
/ 12 декабря 2011

Если я получу то, что вам нужно, я бы предложил установить фоновое изображение с помощью css, тогда вы можете установить правильное положение и т. Д. 

.container {
width:100%;
margin-top:10px;
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg");
background-repeat:no-repeat;
background-position:left center;
height:100px;
overflow:hidden;

}

http://jsfiddle.net/sNz9h/6/

...