Вертикально центрировать миниатюры изображений в фиксированный размер

Question

Хорошо, я знаю, что это обсуждалось до смерти, и люди получали зелёные ответы на свои вопросы, но никто из них не работает для меня.

То, что я хочу сделать, это вертикально расположенные по центру миниатюры, которые генерируются динамически или загружаются через AJAX в div с фиксированным размером. В моем случае 200 * 200 пикселей.

Пожалуйста, перейдите на этот сайт: нажмите здесь и нажмите, например, кнопку "Интернет". Вы увидите, что все миниатюры находятся или находятся над их полями. Я действительно попробовал все, что мог придумать. Единственный вариант, который я знаю, сработает, это жестко закодировать высоту изображения в каждом теге миниатюры, но это займет вечность, потому что мне нужно будет добавить их размеры в БД.

Если вы используете Firebug, вы можете легко отредактировать все на сайте для запуска тестов, именно так я и делал в основном.

Я надеюсь, что кто-то может помочь мне здесь. Я действительно был бы признателен за это. Большое спасибо.

Answer 1

Обычно, когда мне нужно это сделать, я просто не использую тег <img>. Вместо этого я помещаю это изображение на фон элемента с background-position: 50% 50%. Пример:

HTML

<div class="onepic">
    <a href="http://www.dinomuhic.com/pic/web/Wigga.jpg" class="thickbox" style="background-image: url('http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg')"></a>
</div>

CSS

.thickbox {
    display: block;
    width: 200px;
    height: 200px;
    background-position: 50% 50%;
}

Конечно, это не может быть SEO-дружественным или изящно разлагаемым (если нет CSS) Но по этой причине вы можете поместить тег <img> и установить его на display: none, например:

HTML

<div class="onepic">
    <a href="http://www.dinomuhic.com/pic/web/Wigga.jpg" class="thickbox" style="background-image: url('http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg')">
        <img src="http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg">
    </a>
</div>

CSS

.thickbox {
    display: block;
    width: 200px;
    height: 200px;
    background-position: 50% 50%;
}
.thickbox img {
    display: none;
}

И вот оно у вас есть. Без JavaScript, SEO-дружественное решение :-). Надеюсь, вы поняли концепцию, дайте мне знать, если мне нужно что-то объяснить.

Answer 2

Это работает?

<div id="outer">
    <div id="inner">
         //image goes here
    </div>
</div>

#outer {
  display:table;
}
#inner {
  display:table-cell;
  vertical-align:middle;
}

Answer 3

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

Ваш CSS должен содержать это:

.friend_photo_cropped{
    overflow: hidden;
    height: 75px;
    width: 75px;
    position:relative;
}
.friend_photo_cropped img{
    position:relative;
}

Ваш код должен быть таким:

<?php
list($width, $height) = getimagesize($yourImage);
if ($width>=$height)
{
        $h = '75';
        $w = round((75/$height)*$width);
}
else
{
        $w = '75';
        $h = round((75/$width)*$height);
}
$top = -round(($h-75)/2);
$left = -round(($w-75)/2);
echo '<td height="75">';
echo '<div class="friend_photo_cropped">';
        echo '<img src="'.$yourImage.'" width="'.$w.'" height="'.$h.'" style="top:'.$top.'px;left:'.$left.'px;">';
echo '</div>';
echo '</td>';
?>

Answer 4

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

Answer 5

К сожалению, я не знаю простого ответа на этот вопрос, так как CSS не смог обеспечить истинную конструкцию вертикального выравнивания. У меня есть два варианта, о которых я знаю (это не значит, что других нет): использовать абсолютное позиционирование элемента img внутри div.onepic (см. Метод 1 в http://phrogz.net/CSS/vertical-align/index.html) ИЛИ использовать javascript для вычисления эскиза Y Высота и установите верхний отступ для каждого div.onepic равным половине разницы между высотой Y для img и div.onepic. С помощью jquery сделать код js довольно просто.