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

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

Это структура 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. Например: Исходное изображение 240x240px, мне нужно изменить его размер на 57%. Это означает, что изображение размером 400x400 будет больше после изменения размера.

После изменения размера изображение должно быть центрировано по вертикали и горизонтали в границах: 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

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

Вот у меня есть рисунок, описывающий, что мне нужно:

http://lookpic.com/i/169/2U12JC16.jpeg


css centering image-processing
person PathOfNeo    schedule 26.03.2010    source источник
comment
192.168. ссылка будет работать только у вас, так как это локальный сетевой адрес.   -  person Pekka    schedule 26.03.2010
comment
у меня есть wamp-сервер, работающий на моем компьютере, я думал, что IP-адрес должен открыть вам мой локальный хост ... я посмотрю ..   -  person PathOfNeo    schedule 26.03.2010
comment
lookpic.com/i/169/2U12JC16.jpeg   -  person PathOfNeo    schedule 26.03.2010
comment
Я отредактировал ваш вопрос, чтобы отобразить изображение.   -  person Peter Lang    schedule 26.03.2010
comment
спасибо, Питер :) ps: я нашел в Интернете способ изменить размер изображения с помощью jquery, если это невозможно/плохо сделать с помощью css: thejudens.com/eric/2009/07/jquery-image-resize Еще не проверял..   -  person PathOfNeo    schedule 26.03.2010

Ответы (2)


arrow_upward
1
arrow_downward

Я не знаю, о чем вы говорите с 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).

person crimson_penguin    schedule 30.03.2010
comment
Спасибо, это какой-то хак, но я думаю, что это сработает. 57, потому что это рассчитывается на сервере. Спасибо за центрирование, масштабирование, как я понял, лучше всего делать на сервере. - person PathOfNeo; 31.03.2010
comment
Это хорошо, масштабирование определенно лучше всего делать на стороне сервера. Конечно, если вы знаете размер изображения при создании кода, вы можете сгенерировать атрибуты стиля left и top, чтобы абсолютно расположить его в нужном месте. Однако этот метод центрирования, вероятно, проще. - person crimson_penguin; 31.03.2010

arrow_upward
0
arrow_downward

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

person aitor    schedule 26.03.2010
comment
у них есть классы, которые я не включил: name comment имеет блок отображения. И, как вы можете видеть выше.. picHolder также имеет блок отображения. Другими словами, все элементы span имеют display:block. За исключением стрелки, я думаю... но это не важно, просто показывает стрелку с правой стороны - person PathOfNeo; 26.03.2010