Фильтр по:
  

Проблема overflow:hidden и border-radius в Опере

Если вы пришли за помощью, то Вам сюда...

  • Страница 1 из 1
  • 1
Модератор форума: Admin, Cибиря4ка, Komoff, Diana  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Если вы пришли за помощью, то Вам сюда... » Проблема overflow:hidden и border-radius в Опере (overflow:hidden и border-radius не образается картинка)
Проблема overflow:hidden и border-radius в Опере
Дата: Четверг, 04.07.2013, 23:33 |
Группа: Гости





 Суть такова.
беру я блок div пихаю в него картинку, диву задаю overflow:hidden и border-radius
Во всех браузерах картинка обрезается нормально. Но в опере почему-то нет. Как будто overflow:hidden вовсе и не задан.
Что делать, подскажите.

 
Дата: Пятница, 05.07.2013, 00:01 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Вариантов два, стилями и скриптом:
Скриптом - брать с картинки ссылку на изображение и прописывать ее фоном:

Варианты 1

Html
Код
<img class="roundImg" src="/_source/_img/anime_800x600/002_800x600.jpg" alt="" />


CSS
Код
span.roundImgOut{
width:600px;height:600px;overflow:hidden;-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;
border:3px solid #999;display:inline-block;background-size:100% 100%;
}
.roundImg{vertical-align:top;}


JavaScript
Код
<script type="text/javascript">
$('.roundImg').wrap(function(){
return '<span class="roundImgOut" style="background:url('+this.src+') no-repeat center center;"/>';
}).hide(0);
</script>


Как видим, скрипт оборачивает картинку блоком с фоном == этой картинке, саму картинку скрывает.

Пример:
☑ roundImgOut v1 Demo


Варианты 2

Html
Код
<div class="roundImgBox">
<img style="vertical-align:top;" src="/_source/_img/anime_800x600/002_800x600.jpg" alt="" />
</div>


CSS
Код
div.roundImgBox{
width:600px;height:600px;overflow:hidden;border:3px solid #999;margin:0 auto;background-size:100% 100%;-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;
}


JavaScript
Код
<script type="text/javascript">
$('.roundImgBox img').hide(0,function(){return $(this.parentNode).css({background:'url('+this.src+') no-repeat center center'});});
</script>


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

Пример:
☑ roundImgOut v2 Demo


И варианты без скриптов.
Принцип - определение размеров картинки .. как бы так сказать, принудительное задание их ей.

Варианты 3
Не лучший, но надежный.

Html
Код
<table cellpadding="0" cellspacing="0" border="0" class="roundImgBox"><tr><td>
<img src="/_source/_img/anime_800x600/002_800x600.jpg" alt="" />
</td></tr></table>


CSS
Код
table.roundImgBox{
border:0;border-collapse:separate;border-spacing:0;-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;border:3px solid #999;table-layout:fixed;width:600px;overflow:hidden;margin:0 auto;
}
table.roundImgBox td{height:600px;overflow:hidden;}
table.roundImgBox img{
height:100%;width:100%;-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;border:0;
}


Пример:
☑ roundImgOut v3 Demo


Варианты 4
Принцип тот-же, им пользуется относительное положение родительского блока + задание картинке 100% размеров.

Html
Код
<div class="roundImgBox">
<img src="/_source/_img/anime_800x600/002_800x600.jpg" alt="" />
</div>


CSS
Код
div.roundImgBox{
width:600px;height:600px;overflow:hidden;
border:3px solid #999;margin:0 auto;
-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;
}
div.roundImgBox img{
position:relative;
height:100%;width:100%;
-moz-border-radius:100em;-khtml-border-radius:100em;border-radius:100em;
}


Пример:
☑ roundImgOut v4 Demo


Ну.. вот так, как-то.
Остальное - вариации на тему.

ps
Проверить на оперу скриптом вот так:
Код
if(window.opera){
/* что-то делаем */
}

 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Если вы пришли за помощью, то Вам сюда... » Проблема overflow:hidden и border-radius в Опере (overflow:hidden и border-radius не образается картинка)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия