Уменьшение изображения на 57% и центрирование внутри структуры CSS - PullRequest
Новая
       13

Уменьшение изображения на 57% и центрирование внутри структуры CSS

3 голосов
/ 26 марта 2010

Привет, я действительно застрял. Я пойду шаг за шагом и надеюсь сделать его коротким.

Это HTML-структура: 

<li class="FAVwithimage">
     <a href="">
     <img src="pics/Joshua.png">
     <span class="name">Joshua</span>
     <span class="comment">Developer</span>
     <span class="arrow"></span>
     </a>
</li>

Прежде чем я вставлю классы CSS, немного информации о точной цели:

Изменение размера изображения (img) на 57%. Если это не может быть сделано с помощью CSS, то решение jquery / javascript. Например: исходное изображение размером 240х240 пикселей, мне нужно изменить его размер на 57%. Это означает, что картинка размером 400х400 будет больше после изменения размера.

После изменения размера картинка должна быть центрирована вертикальный и горизонтальный внутри: 68x90 границы. Итак, у вас есть элемент LI, который имеет элемент A, а внутри A мы IMG, IMG изменен на 57% и в центре, где максимальная ширина может

Конечно, 68px и максимальная высота 90px. Нет, чтобы это работало, я добавлял элемент SPAN вокруг IMG.

Вот о чем я думал: 

<li class="FAVwithimage">
     <a href="">
     <span class="picHolder"><img src="pics/Joshua.png"></span>
     <span class="name">Joshua</span>
     <span class="comment">Developer</span>
     <span class="arrow"></span>
     </a>
</li>

Тогда я бы дал элемент span: display: block и w = 68px, h = 90px. Но, к сожалению, это не сработало.

Я знаю, что это длинный пост, но я приложил все усилия, чтобы описать его очень просто. Ниже приведены классы CSS и картинка, чтобы увидеть, что мне нужно. 

li.FAVwithimage {
height: 90px!important;

} 

li.FAVwithimage a, li.FAVwithimage:hover a {
height: 81px!important;

}

Вот что важно. Я не включил классы для: имя, комментарий, стрелка

А теперь классы, которые являются неполными и относятся к IMG. 

li.FAVwithimage a span.picHolder{
/*put the picHolder to the beginning 
  of the LI element*/
position: absolute;
left: 0;
top: 0;
width: 68px;
height: 90px;
diplay:block;
border:1px solid #F00;

}

Граница используется только временно, чтобы показать актуальный picHolder. Сейчас в начале LI, ширина и высота установлены. 

li.FAVwithimage span.picHolder img

{
макс-ширина: 68px важно; Макс высота: 90px важно; } Это класс, который должен уменьшить изображение на 57% и центрировать его внутри picHolder

Здесь у меня есть чертеж с описанием того, что мне нужно:

альтернативный текст http://lookpic.com/i/169/2U12JC16.jpeg

Ответы [ 2 ]

1 голос
/ 31 марта 2010

Я не знаю, о чем вы говорите с 57% - по вашему примеру, вы хотите, чтобы масштабирование соответствовало 68x90, а не 57% конкретно. Насколько я могу судить, использование max-width и max-height работает для этого (хотя не будет работать в IE6, и я не думаю, что для этого есть обходной путь не-JS). Но почему вы ожидаете, что это будет в центре?

Самый простой способ центрировать изображение, размер которого вам неизвестен, когда вы знаете размер родительского элемента, это установить на родительский элемент: 

text-align: center;
line-height: 90px; /* height of parent */
vertical-align: middle;

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

Для абсолютного позиционирования, я полагаю, у вас есть position: relative на li? Кроме того, вы, вероятно, могли бы использовать float: left; вместо этого (но, конечно, вам понадобится элемент с clear: left; в конце li).

0 голосов
/ 26 марта 2010

Насколько я помню (на некоторое время из мира веб-разработчиков), a является встроенным элементом, и вы не можете установить его высоту. Вы можете попробовать добавить display: block к элементам.

...