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

Question

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

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

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

Answer 1

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

<div style="
  background-image:   url(big-image.jpg);
  border-radius:      1em;
  height:             100px;
  -moz-border-radius: 1em;
  width:              100px;"
></div>

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

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

Answer 2

Мои последние версии 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}.

Answer 3

Даже когда 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 (см. эта ошибка) - не то чтобы это вас слишком беспокоило.

Answer 4

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

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;}

Answer 5

В CSS3 теперь также есть фоновый клип.Он работает во всех основных браузерах.Возможные варианты: Border-Box, Padding-Box и Content-Box.В вашем случае, я думаю, вам захочется использовать отступ.

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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