|
|
Модератор форума: Samuel |
Форум » uCoz » Помощь по HTML и CSS » Проблема с картинками (Помогите сделать обрезание картинки по боку.) |
Проблема с картинками |
off-line Добавлено: 2014-Мар-10 - 22:31 | Сообщение #1
Приветы! НАчал верстать новый шаблон и столкнулся с такой проблемой.
Нужно, чтобы картинки новостей уменьшались в несколько раз практически под размер блока по высоте, но до тайтла новости, а в ширине обрезалась, и качество не терялось как на первой картинке. Собственно вот так должно выглядеть Добавлено (2014-Мар-10, 22:31) Прикрепления:
8023845.png
(676.5 Kb)
·
7189244.jpg
(393.8 Kb)
Сообщение отредактировал zhenikdst - Пятница, 2014-Мар-07, 00:03
|
off-line Добавлено: 2014-Мар-11 - 16:24 | Сообщение #2
zhenikdst, покажи код, что есть сейчас. А вообще поюзай свойство overflow:hidden
Хочешь в команду сайта? Пиши! Контакты в профиле. |
off-line Добавлено: 2014-Мар-12 - 14:16 | Сообщение #3
пиши в html
Код <img src="адрес картинки" width="какую длину хочеш" height="какую высоту хочеш"> http://createcraft.ru | Дополнения для Minecraft PE | Игры на андроид | Форум Веб-Мастеров |
off-line Добавлено: 2014-Мар-12 - 15:47 | Сообщение #4
DARKHANTER, изображения получатся растянутыми лучше используй в css overflow:hidden; так лишка скроется и изображение останется не растянутым
Помог? + в репу! |
off-line Добавлено: 2014-Мар-12 - 15:48 | Сообщение #5
DARKHANTER, заключи картинку в див, например, диву назначь нужную ширину и высоту и добавь свойство owerflow:hidden. в этот див засунь картинку, можно ее ограничить по ширине или высоте немного, тут нужно смотреть.
В итоге получим, что картинку див будет резать, оставляя в поле видимости лишь кусок от нее. По тому методу сверстан мой вид материалов. Код <span class="post-img-cut"><img src="http://uc-portaller.ru/_ld/64/s65711556.jpg"></span> CSS Код .post-img-cut {float:left;width:200px;height:120px;overflow:hidden;text-align:center;} .post-img-cut img {max-width:400px;min-width:200px;} Хочешь в команду сайта? Пиши! Контакты в профиле. |
off-line Добавлено: 2014-Мар-13 - 13:23 | Сообщение #6
Большое спасибо! Буду пытаться
Добавлено (2014-Мар-13, 13:23) Код <center><div class="conre"> <img class="imd" src="Luana-icon.png" alt="Image Title" /> <a class="ssl" href="">Новость-тыыыыыырыррырыыыыыы</a> </div> </center> Код .conre{ width: 350px; height: 300px; background: #f9f9f9; border-radius: 5px; -moz-box-shadow:0 0 6px rgba(0,0,0,0.1); -webkit-box-shadow:0 0 6px rgba(0,0,0,0.1); box-shadow:0 0 6px rgba(0,0,0,0.1); float: left; margin-left: 15px; margin-top: 0px; margin-bottom: 15px; } .imd{ width: 350px; height: 250px; border-radius: 5px 5px 0 0; position: relative; overflow:hidden; } |
| |||
| |||