| Дата: Понедельник, 11.02.2013, 22:22 | Сообщение # 1 |
|
 |
| Сообщений: | 261 |
| Клан: | [VPRS] |
| Награды: | 10 |
|
21
|
| 
Мне нужно было сделать, отображение фотографий как ВКонтакте, у них они обрезаются и смотрятся очень красиво. Вот пример:
Смотрите прикрепления.
Если картинка меньше указанного размера или за пропорциями не соответствует, она отображаеться в таких пропорция, в которих влезет, в блок. Если создавшаяся картинка занимает не весь блок, то на пустом месте будет фоновый цвет.
Приступим к написанию.
Разметка:
Код <div style="display: inline-block;padding: 2px;width: 130px;height: 87px;"> <a href="#" style="float:left;width: 130px;height: 87px;overflow: hidden;text-align: center;background: #F1F1F1;" onclick="var redirect = '/photos?user=1&z=http://cs308324.userapi.com/v308324794/15b0/XLEUb4OKAKw.jpg'; history.pushState('', '', redirect); $('#window').fadeIn(100); return false;"> <img style="vertical-align: top;max-width: 130px;" src="http://cs308324.userapi.com/v308324794/15b0/XLEUb4OKAKw.jpg"></a> </a> </div>
Для начала заключаем ссылку с картинкой в блок div. Для дива устанавливаются такие стили:
--------------------------
display: inline-block; - обязательно, если не будет этого свойства картинки будут отображаться некорректно.
padding: 2px; - отступи, необязательно.
width: 130px; - ширина картинки
height: 87px; - высота.
------------------------
Теперь для ссылки
--------------------------
float:left; - обязательно, или картинку будут отображаться некорректно.
width: 130px; - ширина( тут тоже нужно указать это)
height: 87px; - высота( тут тоже нужно указать это)
overflow: hidden; - Вот это самое главное, оно обрезает картинки, без нее ничего не будет.
text-align: center; - это чтобы обрезания картинка отображалась по середине, а не край картинки.
background: #F1F1F1; - фон, можно не ставить, можете поставить свой.
---------------------
Теперь для самой картинки
-----------------------------------------
vertical-align: top; - это тоже нужно, я уже описывал это.
max-width: 130px; - это максимальная высота картинки, обязательно.
--------------------------------
Ну, вот сам код:
Код <div style="display: inline-block;padding: 2px;width: 130px;height: 87px;"> <a href="#" style="float:left;width: 130px;height: 87px;overflow: hidden;text-align: center;background: #F1F1F1;" onclick="var redirect = '/photos?user=1&z=http://cs308324.userapi.com/v308324794/15b0/XLEUb4OKAKw.jpg'; history.pushState('', '', redirect); $('#window').fadeIn(100); return false;"> <img style="vertical-align: top;max-width: 130px;" src="http://cs308324.userapi.com/v308324794/15b0/XLEUb4OKAKw.jpg"></a> </a> </div>
------------------------------------------------------------------
Непугайтесь вот этого
Код
onclick="var redirect = '/photos?user=1&z=http://cs308324.userapi.com/v308324794/15b0/XLEUb4OKAKw.jpg'; history.pushState('', '', redirect); $('#window').fadeIn(100); return false;"
Это специальная функция Histori API, она мне нужна на сайте. Так как у меня не юкоз, а самописанный.
Помог? Ставь + в репутацию и наградку, отвечу тем же!!
Сообщение отредактировал admin2 - Понедельник, 11.02.2013, 22:23 |
|
|
|
| Дата: Понедельник, 11.02.2013, 23:19 | Сообщение # 2 |
|
 |
| Сообщений: | 549 |
| Награды: | 54 |
|
906
|
| admin2, Что за тема на хроме?
|
|
|
|
| Дата: Понедельник, 11.02.2013, 23:48 | Сообщение # 3 |
|
|
|
| Сообщений: | 261 |
| Клан: | [VPRS] |
| Награды: | 10 |
|
21
|
| Та нашел там в настройках!
Помог? Ставь + в репутацию и наградку, отвечу тем же!!
|
|
|
|
