Jump to content
  • 0

Сделать картинки квадратными


Tchorteg
 Share

Question

Вечер добрый.

Возникла проблема. Циклом из php получаю аватарки пользователей, но они все разные, прямоугольные (горизонтальные, вертикальные), маленькие, большие.

И хочу с помощью css делать образать те что большие, и маленькие увеличивать и делать квадратными.

Пробовал с помощью clip:

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

Прошу у вас совета.

Edited by Tchorteg
Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

div.avatar {
width: 200px;
height: 200px;
}
div.avatar img {
max-width: 100%;
max-height: 100%;
}
....
<div class="avatar">
<img src="траляля" alt="траляля 2" />
</div>

Как-то так, наверное.

ЗЫ

А если совсем красиво выглядеть хочецо, то вот так:

div.avatar {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
}
div.avatar img {
max-width: 100%;
max-height: 100%;
}

Но тут старые IE загнуцо. Правда, они и на предыдущем варианте загнуцо.

Edited by Gaspode
Link to comment
Share on other sites

  • 0

Погружай их в контейнер с overflow: hidden; и ему задавай ширину и высоту.

Получилось без overflow. Но некоторые картинки уезжают в бок, не пойму почему. Посмотрите пожалуйста:

http://yametal.net/main.php Тут видно, картинка слева сверху уехала влево.

Edited by Tchorteg
Link to comment
Share on other sites

  • 0

Получилось без overflow. Но некоторые картинки уезжают в бок, не пойму почему. Посмотрите пожалуйста:

http://yametal.net/main.php Тут видно, картинка слева сверху уехала влево.

А по-моему у тебя картинки некоторые ширины где то 60пк изначально.

Link to comment
Share on other sites

  • 0

Центрировалось. Но топерь увидел такой баг.

Т.к картинка обрезалась, а была большая. То ссылка с этой картинки лежит поверх картинок ниже. Можно как-то сделать чтобы при образении, невидимое поле было не активно для ссылки?

А по-моему у тебя картинки некоторые ширины где то 60пк изначально.

Нет, это средствами движка ресайзю в цикле.

Edited by Tchorteg
Link to comment
Share on other sites

  • 0

Центрировалось. Но топерь увидел такой баг.

Т.к картинка обрезалась, а была большая. То ссылка с этой картинки лежит поверх картинок ниже. Можно как-то сделать чтобы при образении, невидимое поле было не активно для ссылки?

Накладывать сверху ещё один див, пустой.

Link to comment
Share on other sites

  • 0

На ум приходят два варианта

1. Обрезать их на стороне сервера

2. Создать блоки нужного размера и поставить им эти картинки бэкграундом

Первое, понятно, предпочтительнее

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy