圆形CSS图片

在本教程中，我们将介绍一些用于渲染循环的CSS技术< img >元素。负责这个效果的主要CSS属性是这个特性．虽然将此效果应用于方形图像非常简单，但矩形图像需要更多一点额外的工作。

视图演示下载源

广场的图片

一个img一个完美的正方形元素只需要一行CSS。这种技术在方形图像上效果最好。超文本标记语言

CSS

{.circular——广场这个特性:50%;｝

上面的样式规则是以下内容的简写:

.圆形——方形{border-top-left-radius: 50% 50%;border-top-right-radius: 50% - 50%;border-bottom-right-radius: 50% - 50%;border-bottom-left-radius: 50% - 50%;｝

通过设置所有这个特性属性设置为正方形宽度/高度的50%img元素，我们最终塑造img把元素圈起来:

矩形图像

矩形图像有点棘手。要渲染一个圆，图像必须从一个正方形开始。为了解决这个问题，我们可以把img方块中的元素div元素。

然后我们“裁剪”的部分img超出方形包装的元素div．我们可以通过设置包装器来实现这一点div的溢出财产隐藏的．所以照片的主体是不太可能为了剪裁出来，我们还必须处理风景照片(水平方向的矩形)不同于肖像照片(垂直方向的矩形)。

Landscape-oriented图片

超文本标记语言

< div class = "循环——景观”>< img src = "图片/ barack-obama.png " / >< / div >

CSS

.circular——landscape{显示:inline-block;位置:相对;宽度:200 px;身高:200 px;溢出:隐藏;这个特性:50%;} .圆形——景观img{宽度:自动;高度:100%;margin-left: -50 px;｝

的宽度而且高度属性值一定是一样的所以包装器div（.circular——景观)渲染成正方形。此外,宽度而且高度属性值必须等于或小于的高度img．这样可以确保img元素能够占用包装器div不被拉伸。

一般来说，风景照片的主题将-但不总是-位于周围构图中心。为了给我们最好的机会不裁剪出照片的主体，我们可以水平居中img包装器中的元素div通过推动img元素的左边，以补偿左偏裁剪。我们推动的量img元素的25%宽度/高度的包装div．

在本例中，我们将把图像向左移动50px (200px的25%为50px)。我们可以通过设置margin-left财产的img元素变为负值:

margin-left: -50 px;

的假设照片的主体将会靠近构图的中心并不总是正确的．在为该技术选择(或编辑)图像时，最好记住这个假设。

Portrait-oriented图片

超文本标记语言

< div class = "循环——肖像”> 

.circular——portrait{位置:相对;宽度:200 px;身高:200 px;溢出:隐藏;这个特性:50%;} .circular——人像img{宽度:100%;高度:汽车;｝