|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
12.06.2011, 13:40 | #1 |
Регистрация: 12.06.2011
Сообщений: 5
|
Скругленные края для кропнутой картинки внутри div
Помогите разобраться как сделать скругленные углы в моей ситуации. Суть проблемы в следующем:
Подгружаю картинку размера 450х450, кроплю ее при помощи дива размер которого меньше размера картинки. У дива скруглены углы. Я предполагал что скругление углов у дива позволит скруглить углы видимой части картинки, но подобная техника работает только в Firefox, в Safari не смотря на то что у дива overflow:hidden; картинка перекрывает див по границам, и соответсвенно скругление углов не действует. Учитывая то что картинка по размеру больше "окна для ее отображения" реализуемого дивом, скругление углов самой картинки ничего не дает. Подскажите как быть, что делать. .rounded-corners { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } .thumb { position: absolute; top: 0px; left:250px; float: left; width: 180px; height:150px; margin:0; overflow:hidden; } .thumb img { float: left; padding:0 0 0 0; margin-top:0; } <div class="thumb rounded-corners"><img src="img.jpg" alt="" width="450" hight="450"></div>
http://dopamine.com.ua
Последний раз редактировалось kosmos.ehp; 12.06.2011 в 21:40. |
12.06.2011, 15:27 | #2 |
Пользователь
Регистрация: 09.07.2010
Сообщений: 89
|
-webkit-background-clip должно помочь.
Ссылка на статью |
12.06.2011, 21:06 | #3 | |
Регистрация: 12.06.2011
Сообщений: 5
|
Описание проблемы очень похоже, но к сожалению к решению оно не привело. Результат тот же самый(.
Цитата:
http://dopamine.com.ua
|
|
13.06.2011, 14:10 | #4 |
Регистрация: 12.06.2011
Сообщений: 5
|
Пока, единственное решение которое нашел, это дедовский сопособ с картинками скругленных углов.
<div id="container"> <img src="images/fubar.jpg" alt="situation normal" /> <div class="rounded lt"></div> <div class="rounded rt"></div> <div class="rounded lb"></div> <div class="rounded rb"></div> </div> #container {position:relative;} #container img {z-index:0;} .rounded {position:absolute; z-index:1; width:20px; height:20px;} .lt {background:url('images/rounded_LT.png') left top no-repeat;} .rt {background:url('images/rounded_RT.png') right top no-repeat;} .lb {background:url('images/rounded_LB.png') left bottom no-repeat;} .rb {background:url('images/rounded_RB.png') right bottom no-repeat;}
http://dopamine.com.ua
|
14.06.2011, 14:49 | #5 |
Пользователь
Регистрация: 09.07.2010
Сообщений: 89
|
так, а не пробовали <img> выводить как
Код:
|
14.06.2011, 15:41 | #6 |
Регистрация: 12.06.2011
Сообщений: 5
|
Такой вариант не подходит, потому что у картинка больше по размеру чем див которым она собственно и обрезаеться до нужного размера.
Размера дива потом анимируються при помощи jQuery, по этому картинку и нельзя сразу оборезать до рамера дива и в ней самой скруглить углы.
http://dopamine.com.ua
|
14.06.2011, 15:45 | #7 |
Регистрация: 12.06.2011
Сообщений: 5
|
Ну и я забыл сказать, что картинки не статичны они подтягиваются из постов в Wordpress, по этому статичные картинки на бекграунде использовать не получается.
http://dopamine.com.ua
|
15.06.2011, 01:46 | #8 | |
Пользователь
Регистрация: 09.07.2010
Сообщений: 89
|
Тогда единственный способ
Цитата:
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Как растянуть div до края страницы? | TasMan | HTML и CSS | 4 | 22.05.2011 00:37 |
Как растянуть div внутри ячейки таблицы? | Benderbej | HTML и CSS | 6 | 28.08.2010 21:59 |
круглые края div | subbota | HTML и CSS | 2 | 10.07.2010 18:35 |
Позиционирование двух плавающих DIV внутри одного DIV | allocator | HTML и CSS | 5 | 22.07.2009 13:48 |
Как убрать края у картинки | Ruska882009 | Помощь студентам | 1 | 08.04.2009 14:15 |