newbies
Silver Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
небольшая проблемка ie и opera, не хотят воспринимать
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
делаю так:
css
.apartfoto {
width: 366px;
height: 250px;
overflow: hidden;
margin: 10px;
border: 1px solid #FFDDEF;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.apartfoto img {
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -100px;
max-width: 500px;
max-height: 500px;
}
html
<div class="apartfoto">
<img src="/media/uploads/quarters/<? echo ($quarter['main_img']) ? 'small_'.$quarter['main_img'] : 'apartnofoto.jpg'; ?>"/>
</div>
картинка не закругляется, я так понимаю это из за того что мы обрезаем картинку, то есть прячем ту часть что не надо показывать, как тут быть то ?
Добавлено:
пробовал такой вариант еще:
у меня так
<img src="/media/uploads/quarters/<? echo ($quarter['main_img']) ? 'small_'.$quarter['main_img'] : 'apartnofoto.jpg'; ?>"/>
я попробовал так
<a style='background: url(/media/uploads/quarters/<? echo ($quarter['main_img']) ? 'small_'.$quarter['main_img'] : 'apartnofoto.jpg'; ?>) center center'></a>
не показывает картинку.
Добавлено:
вот так реализовал , так работает, центрует ))
html
<div class="apartfoto">
<img style="background: url(/media/uploads/quarters/<? echo ($quarter['main_img']) ? 'small_'.$quarter['main_img'] : 'apartnofoto.jpg'; ?>) center center">
</div>
css
.apartfoto {
width: 366px;
height: 250px;
overflow: hidden;
margin: 10px;
border: 1px solid #FFDDEF;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.apartfoto img{
width: 366px;
height: 250px;
background-size: contain;
border: 1px solid #FFDDEF;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-html-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
но не работает в фаерфоксе не видно фоток, в ie, работает и в хроме все ок, опера так же даёт добро ) |
