Есть несколько способов сделать выводимое изображение вот таким, с закругленными краями. Я делаю самым простым и, самое главное, правильным методом.
Картинку выше, просто обработали в редакторе и обрезали края, сделав их белыми (русский тракторист даже писать устал, а представьте себе, обрабатывать таким образом 100 фотографий?)
В общем на сайте rtr24.ru я делаю это с помощью css. Вносим код в template.css шаблона сайта. И после, достаточно лишь написать класс к любому изображению и оно будет выглядеть так, как нужно.
Изображение с закругленными краями
Пример.
Берем изображение обычное.
Добавляем код в template.css. Видим, что здесь можно задать и размеры изображения с закругленными краями и радиус самого закругления краев.
|
.img-round { |
Теперь публикуем ту же самую картинку, только добавив класс .img-round
<a class="img-round" title="Заголовок" href="/ссылка"> <img alt="Альтернативный текст" src="/ссылка_на_изображение"> |
Получаем вот такое изображение с закругленными краями.
Драники с мясом Вкусные драники с мясом-сытная еда. kulinar1.ru
C кодом css можно сделать, что угодно. Например классы меню в Joomla 3 или рамку с закругленными краями разного цвета.
|
.img-round-color:link, .img-round-color:visited { |
Теперь публикуем ту же картинку (она снова будет с закругленными краями), меняя только имя класса на img-round-color. Разумеется имена классам вы можете придумать любые другие.
<a class="img-round-color" title="Заголовок" href="/ссылка"> <img alt="Альтернативный текст" src="/ссылка_на_изображение"> |
Для проекта Big я использую такой код:
.all-pic {
display: block;
border-radius: 15px;
margin: 0 0 9px;
width: 300px;
height: 180px;
}
Таким образом, рамка изображения с закругленными краями, получается на всех фотографиях. И так как мы справились с таким задание, то и рекламу между статьями в блоге поставить сможем.