Граждане верстальщики, у меня снова вопрос.
Есть превьюшки, одна сторона которых всегда равна 200рх, которые нужно стилями сжать и разместить в 50*50px, сохранив, при этом, соотношение сторон.
Картинки могут быть как 200*200, 70*200, 200*120 и так далее, как угодно, но одна из сторон всегда равна 200рх.

КАК?

Tagged with →  

23 Responses to Граждане верстальщики, у меня снова вопрос.

  1. Rerodin:

    для ие6 подсказать?

  2. Mlrre:

    если стилями то примерно так (не факт, что сработает :).container50x50 img {
    zoom: 0.25; -moz-transform: scale(0.25);
    }

    только опера мимо 🙁

  3. DraSnow:

    ну вот смотри, если принудительно задать и ширину и высоту, то будет хуйня, если картинка не квадратная. Если задать только ширину, то узкую картинку распидорасит либо она не впишется вся в 50*50, и если задать высоту, то будет похожая хуйня. В общем, я еще не пробовал, пока только в голове кручу эту хуйню

  4. DraSnow:

    можно как угодно, не только стилями. главное показывать картинки в 50*50. Ну и чтобы в 8ИЕ работало

  5. DraSnow:

    у тебя там картинки изначально квадратные были?

  6. KriYes:

    Почему не одной строчкой яваскрипта?

  7. Rerodin:

    вообще — со стороны сервера, ну чтоб прям везде работало, там, куда это должно упасть, выводите одноклеточную таблицу 50 на 50 с центровкой по обоим направлениям, и на стороне сервера, опять же, либо геньте минипики иные, либо ещё как выпендритесь.

  8. SbVelo:

    Короче, можно попробовать так: див с размерами 50×50 и overflow:hidden.
    В нем картинка у которой в атрибутах выставлен размер одной из сторон. Т.е. width=50 или height=50.
    Картинка отресайзится с сохранением соотношения сторон.

    Нужную сторону определяет серверная часть.

    Но тут может быть варианты, когда картинка будет увеличена, если один из размеров меньше 50.

    Если нужен не левый верхний угол, а например центр, то тоже можно что-нибудь придумать, поля там отрицательные задать, или position:absolute.

  9. DraSnow:

    дело в том, что мне также нужны и 200*200, они будут показываться при наведении. А в два раза больше картинок гонять — не вариант.

  10. Oveer:

    max-width + max-height + expression для ie?

  11. XbiNo:

    заебошь спрайтом 250*200. Заодно решишь на сервере сжатие как захочешь.

  12. DraSnow:

    так над джумлой еще никто не издевался!

  13. Rerodin:

    ну окей, совет про ячейку таблицы со стороны сервера в силе. Надеюсь, что ты не сотни картинок собрался так выводить, так что допфича в помощь: когда на сервер закидываешь, то, цитата:
    «картинка, у которой в атрибутах выставлен размер одной из сторон. Т.е. width=50 или height=50.
    Картинка отресайзится с сохранением соотношения сторон.
    Нужную сторону определяет серверная часть.»
    И не только определяет, но и в базу записывает, и выводит в сторону браузера с метой. По наведению — джаваскриптом ячею до 200 на 200 распираешь, у картинки снимаешь атрибут ширины или высоты, а когда мышь уведена, то по пометке-классу возвращаешь в исходное состояние.

  14. Rerodin:

    И не забудь рассказать о новых прикольных ограничениях.

  15. DraSnow:

    десятки тысяч, вообще-то

  16. DraSnow:

    поэтому все должно ресайзиться браузером

  17. Rerodin:

    на одной странице, имелось ввиду. Предлагаемое мной решение классно вписывается в задачу, только по уже имеющимся тебе всё равно надо пройтись на сервере и загнать в БД ссылку на картинку и индикатор того, что приписывать в атрибут class.

  18. Suxgreen:

    min-height:50px; max-height:50px; и запихать в блок 50×50; overflow:hidden, но картинка будет не по центру.
    Можно потом пробежаться джаваскриптом и установить marginRight:((50 — img.width()) / 2) и так же по высоте. Хотя, вертикальное центрирование можно сделать через display:table-cell для враппера, но это ие8+

  19. KriYes:

    блять.
    for(i in a=document.getElementsByTagName(‘img’)) if(a[i].width<a[i].height)a[i].height =50; else a[i].width=50;

  20. KriYes:

    И все-так интересно, почему не
    for(i in a=document.getElementsByTagName(‘img’)) if(a[i].width

  21. Ylfer:

    div{width:50px;height:50px;background-size:50px;background:url(your_200x200.jp g) 50% 50%}

    старенькие ie пролетают, там будет кусок из центра картинки 200х200, фон не станет масштабироваться из-за отсутствия поддержки свойства background-size

  22. DraSnow:

    спасибо, попробую. старенькие ИЕ я на хую вертел

Добавить комментарий