Как вы центрируете изображение в указанной области, не меняя его размер? - PullRequest
Новая
       9

Как вы центрируете изображение в указанной области, не меняя его размер?

1 голос
/ 26 июня 2009

Я хочу центрировать изображение в области без изменения размера ... Я использую HTML.

Пример:

У меня есть изображение image - изображение на самом деле 64x64. Отображается отлично.

Теперь у меня есть другое изображение image однако изображение не такое большое, как должно быть, его 32x32 - что происходит, вот оно изменяет размер изображения до 64x64 и делает его похожим на $% ^ &.

Как сделать изображения меньше желаемой ширины и высоты по центру в области 'img' без какого-либо изменения размера?

Ответы [ 9 ]

2 голосов
/ 26 июня 2009

Вам понадобится что-то вроде этого: 

<div class="box">
    <img src="whatever size image you'd like" />
</div>

А для оформления (во внешней таблице стилей, естественно) вы бы применили: 

/* Image centering */
div.box {
    border: 1px black solid;
    height: 64px;
    width: 64px;
    background: #444;
    display: table-cell;
    vertical-align: middle;
}
.box img {
    display:block;
    margin: 0px auto;
}

Это работает для изображений с размерами <= 64x64px и легко модифицируется для работы с большими изображениями. Ключевыми элементами здесь являются </p>

  • установить размеры на div
  • отображать как ячейку таблицы (позволяет выравнивать по вертикали)
  • выравнивание по вертикали (выравнивание по оси Y без странных хаков)
  • дисплей: блок на элементе img
  • поле: автоматическое центрирование изображения по горизонтали
1 голос
/ 27 июня 2009

Решение без IE - недружелюбно display:table-cell: 

<!DOCTYPE html>
<style>
div {
  line-height:64px; /* that's the secret sauce */
  text-align:center;
  width:64px; height:64px;
}
img {vertical-align:middle}
</style>
<div><img …></div>
0 голосов
/ 26 июня 2009

Используйте CSS для рендеринга изображения с использованием фона: 

<div style="background: url(img1.png) no-repeat center center; height: 64px; width: 64px;"></div>

Это покажет изображение в центре, не масштабируя его.

0 голосов
/ 26 июня 2009

Решение представляет собой простой бит CSS + HMTL 

<img src="transparentpixel.gif" 
width="64" 
height="64" 
style="
    background-image:url('path/to/image.jpg');
    background-repeat:no-repeat;
    background-position:center center;
" />

transparentpixel.gif - это простое прозрачное изображение размером 1x1px

0 голосов
/ 26 июня 2009

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

Markup: 

<li><div><span></span>
    <img src="_media/objects/jessica-bowman.png" alt="Jessica Bowman" /></div>
    <p><a href="#">Jessica Bowman</a></p>
</li>

Промежуток был только там, чтобы получить закругленные углы на изображении, это не обязательно необходимо.

CSS: 

ul.recent-list li div {
    position: relative;
    float: left;
    width: 36px;
    height: 36px;
    overflow: hidden;
}

ul.recent-list li div span {
    position: relative;
    z-index: 100;
    display: block;
    width: 36px;
    height: 36px;
    background: url("../_media/icons/icon-overlay.png") top left no-repeat;
}

ul.recent-list li div img {
    position: relative;
    top: -36px;
    z-index: 0;
    float: left;
}

JavaScript: 

$(window).load(function() {
$("ul.recent-list div img").each(function() {
    var moveX = ($(this).width() / 2 * -1) + 18;
    var moveY = ($(this).height() / 2) * -1 - 18; // 18 is 1/2 the default offset of 36px defined in CSS
    $(this).css({'top' : moveY, 'left' : moveX});
});
});
0 голосов
/ 26 июня 2009

Тег img с атрибутами width и height говорит: «растянуть или уменьшить изображение до этого размера независимо от его фактического размера». используйте что-то вроде: 

<div style="text-align:center;">
    <img src="x.jpg">
</div>

и нет, я не знаю, почему выравнивание текста будет работать, но, по-моему, это так.

0 голосов
/ 26 июня 2009

Вы можете динамически получить размер изображения с помощью функции getimagesize() php: 

<?php
  $size = getimagesize('imgX.png');
  $height = $size[1];
  $width = $size[0];
?>
<div style="text-align: center">
  <img src="imgX.png" width="<?php print($width) ?>" height="<?php print($height) ?>" />
</div>
0 голосов
/ 26 июня 2009

Решение, которое я когда-то использовал: добавить таблицу с одной строкой, единичной ячейкой. Установите для его ширины и высоты значение 64, не устанавливайте границы, интервалы, отступы и выравнивайте их по центру. Поместите свое изображение в ячейку этой таблицы.

0 голосов
/ 26 июня 2009

Вы можете попробовать поместить изображение в DIV размером 64x64 без указания размеров изображения. Затем вы можете стилизовать div так, чтобы его содержимое было центрировано, а любое переполнение скрыто.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...