Как предотвратить выход изображения за пределы рамки с закругленными углами?

Если я использую этот код, изображение не обрезается закругленными углами div (в результате квадратные углы изображения закрывают закругленные углы div):

<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;">
    <img src="big-image.jpg" />
</div>

Кто-нибудь знает, как получить div с закругленным уголком, чтобы дочернее изображение не переполнялось?

Ответов (10)

Решение

Это может сработать или не сработать в вашей ситуации, но подумайте о том, чтобы сделать изображение фоном CSS. В FF3 отлично работает следующее:

<div style = "
  фоновое изображение: url (big-image.jpg);
  радиус границы: 1em;
  высота: 100 пикселей;
  -moz-border-radius: 1em;
  ширина: 100 пикселей; "
> </div>

Я не уверен, что есть другой обходной путь - если вы примените границу к самому изображению (скажем, 1em глубокую), вы получите ту же проблему с квадратными углами.

Изменить: хотя в случае «добавления границы к изображению» вставка изображения верна, просто изображение не находится на одном уровне с div элементом. Чтобы проверить результаты, добавьте style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" в img тег (с помощью width и height, при необходимости, установите соответствующий параметр).

Вам нужно указать точную ширину и высоту с помощью overflow: hidden, если вы хотите, чтобы ваш div обрезал ваше изображение.

Если вы сделаете изображение фоновым, а не содержимым, изображение не будет обрезать закругленные углы (по крайней мере, в FF3).

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

Я думаю, что эта проблема возникает, когда изображение или его родительский элемент имеет значение position: absolute. Это понятно, поскольку установка absolute выводит элемент из потока документа.

Я на 90% уверен, что видел исправление для этого, я обновлю этот пост, когда это сделаю: D

Также теперь в css3 есть фоновый клип. Он работает во всех основных браузерах. Возможные варианты: border-box, padding-box и content-box. В вашем случае, я думаю, вы захотите использовать padding-box.

-webkit-background-clip: padding-box;
-moz-background-clip:    padding; 
background-clip:         padding-box;

Простой border-radius по img тегу отлично работает в текущих версиях Safari 5, Chrome 16, Firefox 9:

<div>
    <img src="big-image.jpg" style="border-radius: 1em;" />
</div>

Дополнительная обрезка обычно находится в пределах погрешности толщины границы. Просто позвольте внутреннему радиусу быть немного меньше, чтобы погрешность попадала под границу, а не рядом с ней.

<div style='border-radius:5px;border:thin solid 1px;'>
   <img style='border-radius:4px' />
</div>

Даже если overflow установлено значение hidden, border-radius не обрезает его содержимое. Это сделано намеренно.

Одним из решений было бы установить border-radius как изображение, так и его контейнер.

<div style="border-radius: 16px; ...">
    <img src="big-image.jpg" style="border-radius: 16px; ..." />
</div>

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

Попробуйте это обходное решение:

  1. Изображение в imgтеге присутствует, и вы устанавливаете ширину и высоту.
  2. Затем спрячьте это с помощью visibility:hidden. Ширина и высота остаются неизменными.
  3. После этого вы установите тот же источник, что и фоновое изображение, и оно будет обрезано.

<a class="thumb" href="#" style="background-image: url('./img/pic1.jpg');" title="Picture">
  <img border="0" src="./img/pic1.jpg" alt="Pic" height="100" width="150" />
</a>

#page .thumb {
background-repeat: no-repeat;
background-position: left top;
border: 3px #e5dacf solid;
display: block;
float: left;}

#page .thumb img {
display: block;
visibility: hidden;}

Мои последние версии Chrome, Firefox и Safari обрезают изображение по радиусу границы контейнера (как и предполагалось).

http://jsfiddle.net/RQYnA/12/embedded/result/

В Firefox 15 я вижу, что изображение обрезается, когда контейнер имеет {overflow: hidden} . (Обрезка дочернего контента, похоже, была добавлена ​​в Gecko 2.0. )

В Chrome 23 и Safari 5 изображение обрезано только тогда, когда в контейнере есть, {position: static; overflow: hidden} а в изображении есть {position: static} .