Закругленные углы на img с рамкой в ​​FF

Question

Это на самом деле не вопрос, просто то, с чем я боролся сам и думал, что другие могут по достоинству оценить решение.

Если вы попытаетесь применить границу и радиус округленной границы к элементу div, содержащему изображение в FireFox, вы получите округленные границы элемента div с квадратным изображением, торчащим по углам - довольно неприглядно.

Решение

1. Примените желаемую границу к div в css как обычно.

2. Примените класс к div (для работы с несколькими изображениями: вместо этого вы можете использовать идентификатор).

3. Используйте jQuery для получения содержащегося в img атрибута src.

4. Установите для фона div вышеупомянутое значение src.

5. Применить радиус границы.

6. Скройте изображение непосредственно, чтобы показать фон позади него.

И валлах:

$('.imgDiv').each(function(){
    var imgSrc = $(this).children().attr('src');
    var imgBg = 'url(' + imgSrc + ')';
    $(this).css('background-image', '' + imgBg + '').css('-webkit-border-radius','15px').css('border-radius','15px').css('-moz-border-radius','15px');
    $(this).children().hide();
});

Теперь изображение будет отображаться с закругленными углами и рамкой. Если JavaScript отключен, пользователи по-прежнему будут видеть изображение с рамкой, хотя и полностью квадратное. И единственная разметка, необходимая в HTML, - это новый класс, применяемый к div.

Answer 1

Если вы слишком конкретно относитесь к отключению JavaScript.единственная альтернатива - это CSS.

CSS

.imgDiv {
   -webkit-border-radius : 15px;
   border-radius : 15px;
   -moz-border-radius : 15px;

 }

Answer 2

В Firefox 4 вы получите закругленные границы на img всего с:

img { border-radius: 15px }