border-radius на изображениях .. (закругленные углы)

Question

Попытка добавить закругленные углы к изображениям, которые также имеют границы.

Придумали следующее:

http://jsfiddle.net/tgqBG/

Но это не выглядитхорошо с пробелами под изображением и тем, что углы границы и изображения не совпадают.Я что-то не так делаю?

Спасибо, Уэсли

Answer 1

Добавьте overflow:hidden; к .thumb_container, добавьте vertical-align:bottom; к изображению.

Вы можете удалить множество других значений, вот обновленный jsfiddle:

http://jsfiddle.net/tgqBG/12/

Другой способ сделать это (поддерживается несколькими браузерами) - показать изображение через background-image.В своем комментарии я сказал, что это создаст проблему, потому что элемент нуждается в фиксированных размерах, однако я только что понял, что это можно легко исправить, добавив изображение туда, но скрыв его.

http://jsfiddle.net/tgqBG/51/

Это не работает без float, потому что он получит ширину 100%.Это связано с тем, что автоматическое свойство div отображается как block.

. Чтобы исправить это, измените div на span, а затем добавьте display:inline-block;.

* 1027.*http://jsfiddle.net/tgqBG/52/

Answer 2

Попробуйте: http://jsfiddle.net/tgqBG/39/

Внутреннее изображение меньше и, следовательно, должно иметь меньший радиус границы.По умолчанию поля и отступы равны 0. Избегайте поплавков, как чума.Выравнивание по вертикали: верхняя часть изображения корректно.

Answer 3

Следует учитывать, что элемент, который меньше своего контейнера (изображение), должен иметь меньший угловой радиус, чтобы его можно было выровнять с радиусом угла внешних элементов (то есть иметь одинаковую кривизну).Попробуйте что-то вроде 15px для радиуса границы изображения.Это похоже на ваш пример.