Автор Артем задал вопрос в разделе Другие языки и технологии
помогите с 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 какому-нибудь блоку. Иначе не выйдет (разве что скрипт написать, который будет делать то же самое - заменять картинку на блок с фоном-картинкой.
Как закруглять углы - .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;
}
Если надо "обрезать" - иначе говоря, кадрировать - показать часть картинки, то ее надо ставить в background какому-нибудь блоку. Иначе не выйдет (разве что скрипт написать, который будет делать то же самое - заменять картинку на блок с фоном-картинкой.
Как закруглять углы - .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;
}
Ответ от Egregreh[гуру]
Посмотрите вот тут
http : // www . css3 . info / preview / rounded-border / (пробелы уберите)
Посмотрите вот тут
http : // www . css3 . info / preview / rounded-border / (пробелы уберите)
Ответ от 3 ответа[гуру]
Привет! Вот подборка тем с ответами на Ваш вопрос: помогите с css, мне нужно обрезать изображение(не ужать) и у него же углы закруглить. Как сделать?
Как сделать изображение background в css адаптивное автоматически под все экраны
Блок, к которому она фоном, должен иметь ширину в процентах.
И настроить свойства этого фона,
подробнее...
Как обрезать background в css3
background-image: url("путь до картинки");
background-position: center center;
Как с помощью CSS задать одинаковый размер всех изображений, который будут на HTML-странице?
сделай стиль на img тэг
img {
width: 100px;
height: 100px;
}
таким
подробнее...