我如何阻止一个图像溢出一个圆形的角箱？

StackOverflow https://stackoverflow.com/questions/587814

  •  06-09-2019
  •  | 
  •  

题

如果我使用这个代码，图像不是修剪的div的圆角(产生图像的方角，涵盖了div的圆形的):

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

没有人知道如何获得一个圆corder div防止儿童图像溢?

有帮助吗？

解决方案

这可能会或可能不会在你的情况下工作，但考虑使图像的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适当地设定，如果必要的话）。

其他提示

我的最新的Chrome，Firefox和Safari剪辑图像到容器的边界半径（如预期）。

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

在火狐15，I看到当该容器具有{overflow: hidden}截取图像。 （子内容的裁剪似乎已经在壁虎2.0加入。）

在铬23的Safari 5，I查看该图像剪切的仅当该容器具有{position: static; overflow: hidden}并且图像具有{position: static}。

即使overflow设为hidden，border-radius不夹及其内容。这是由设计。

一个解决办法是设置border-radius在图像上，以及其容器。

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

另一种方式是设置图像作为使用background-image容器的背景;但也有版本3（见这个bug 之前在Firefox这种方法的问题） - 倒不是说不需要打扰你太多

。

试试这个解决办法：

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

还有现在背景夹在CSS3。它适用于所有的主流浏览器。选项有边界盒，填充框和内容盒子。在你的情况，我想你会想用填充盒。

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

如果你做出图像的背景图像，而不是内容，图像将不会削波圆角（至少在FF3）。

您还可以添加填充到div，或保证金为图像添加圆角的边框和图像之间微胖。

在border-radius标签A简单img正常工作在Safari 5，铬16的当前版本，火狐9：

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

我认为当图像或图像的父位置发生此问题：绝对的。这是可以理解为设置绝对值取元件出该文档的流程。

我敢肯定，90％我已经看到了这一个解决方法，我会更新这个帖子的时候我做的：d

额外的裁剪通常仅在边框厚度的误差幅度。只是让内半径略小，使得误差界限的边界落入下旁边，而不是被

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

您需要指定一个确切的宽度和高度与溢出：隐藏，如果你希望你的div切图像

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top