Как скруглить углы изображений? - PullRequest
Новая
       8

Как скруглить углы изображений?

1 голос
/ 22 марта 2012

Каков лучший способ программно (с использованием HTML, CSS, JavaScript и / или PHP) закруглить углы изображений?

Я играю с этим методом только для CSS: http://maxvoltar.com/archive/rounded-corners-on-images-css-only

Ключевые особенности этого метода:

  1. Оборачивание изображения в элемент, где вы можете округлить границы и где вы можете установить фон элемента обертки как желаемое изображение.
  2. установка фактической непрозрачности изображения на 0
  3. плавающая оболочка влево, чтобы изображение и оболочка совпали.

вот HTML: 

<p style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg)">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg" alt="Dog" />
</p>​

вот CSS: 

img {
vertical-align: bottom;
/*width:50px;
height:50px */ /*ideally would be able to alter these as needed*/
}

p { 
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
}

К сожалению, этот код не работает при изменении размера изображений. Пожалуйста, сравните следующие 2 скрипки, чтобы понять, что я имею в виду:

изображение НЕ измерено вручную: http://jsfiddle.net/trpeters1/wxXAn/1/

изображение установлено на ширину 50 пикселей / высоту 50 пикселей: http://jsfiddle.net/trpeters1/wxXAn/2/

Есть ли способ спасти этот метод, если вы хотите сохранить возможность изменения размера изображения по ширине / высоте? Есть ли лучшие способы, чем этот метод?

UPDATE благодаря Тому (см. ниже) этот вопрос решен. Ключом для изменения размера является установка ОБА и высоты и ширины изображения и оболочки на один и тот же размер. Пожалуйста, посмотрите эту скрипку и сравните с приведенной выше, чтобы понять, что я имею в виду: http://jsfiddle.net/trpeters1/wxXAn/13/

Обратите внимание, что в этой скрипке высота и ширина тегов <p> AND <img> ОБА установлены на 50 пикселей.

1 Ответ

1 голос
/ 22 марта 2012

Мне удалось заставить его работать, используя следующий код 

p {
float: left;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
background-size:50px 50px;
}

Я добавил тег background-size:50px 50px;, и вы получите маленькую собаку с закругленными углами.

Надеюсь, это то, что вы ищете.

Спасибо

...