Помогите с css, мне нужно обрезать изображение(не ужать) и у него же углы закруглить. Как сделать?
<style>
#image {
width: 100px;
height: 100px;
background-image: url(../image.jpg);
background-position: center center;
}
</style>
в итоге в браузер будет грузиться полноразмерная картинка, а показываться лишь центральная её часть, размером 100 на 100.
вот.. .
а для закругления стиль :
border:1px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
Если надо "обрезать" - иначе говоря, кадрировать - показать часть картинки, то ее надо ставить в background какому-нибудь блоку. Иначе не выйдет (разве что скрипт написать, который будет делать то же самое - заменять картинку на блок с фоном-картинкой.
Как закруглять углы - border-radius
В Opera для картинок (<img>) закругление углов не работает! - Известный баг, так что это еще один резон поставить картинку в фон - тогда все будет ок.
Для IE<9 можно использовать PIE: [ссылка заблокирована по решению администрации проекта] .com/ (пробел перед .com убрать)
Итого.
Вместо картинок (img) ставим некие блоки - например:
<span id="img1" class="radius_15px"></span>
<span id="img2" class="radius_15px"></span>
...
В CSS пишем:
.radius_15px {
display:inline-block;
//display:inline; /* для IE6-7 */
//zoom:1;
width:120px; /* размеры "обрезанной" картинки */
height:120px;
border-radius: 15px; -moz-border-radius:15px; -webkit-border-radius:15px; -khtml-border-radius:15px; /* 15px - радиус закругления */
behavior: url(pie.htc); /* линк на PIE .htc - если используется */
}
#img1 {
background:url(img1.jpg) 20px 50px no-repeat; /* линк на картинку1. первая цифра - сдвиг влево, вторая - сверху */
}
#img2 {
background:url(img2.jpg) 30px 50px no-repeat;
}
Посмотрите вот тут
http : // www . css3 . info / preview / rounded-border / (пробелы уберите)
http://www.rusdigi.org/css3/css3-dlya-nachinayushhikh-chast-2-behkgraundy-fony-i-granicy.html
