css 剪辑图片_[译]用CSS剪切圆形图片

用CSS剪切圆形图片

在这个教程，我们会介绍一下使用CSS技巧来渲染出圆形的元素，主要来实现这个效果的CSS属性是border-radius.

尽管对于正方形的图片来实现圆形这个效果是相当简单的，但是对于长方形来说可能需要多一点点工作。

正方形图片

一个百分百正方形的img标签要变成圆形的只需要一行CSS代码。这个技巧在正方形图片上使用的最方便。

HTML

CSS

.circular--squareP{

border-radius:50%;

}

通过设置img标签的所有的border-radius属性为正方形宽/高的50%，我们就可以把这个img标签变成圆的。

长方形图片

长方形图片会稍微有一点技巧一点。

去渲染一个圆形，必须以圆形图片为基础

要解决这个问题，我们可以通过在img标签外面套一层div，然后我们通过将超过这个外层div的img标签的内容给裁掉来实现。具体的话可以通过将外层div的overflow属性设置为hidden。

为了能够让照片的主题不要被裁掉，我们必须要区别对待水平和垂直方向的图片。

水平方向的图片

HTML

CSS

.circular--landscape{

display:inline-block;

position:relative;

width:200px;

height:200px;

overflow:hidden;

border-radius:50%;

}

.circular--landscape img{

width:auto;

height:100%;

margin-left:-50%;

}

高度和宽度属性必须要保持一样来确保这个div(.circular--landscape)能够作为正方形渲染起来

除此之外，高度和宽度属性必须要等于或者小于img的高度。这能够确保img元素能够占满外层div而不会多出一部分空白

一般来说，水平方向图片的主题(但不一定)会位于图片的中心位置。为了能够让我们尽量不会把图片的主题裁剪啦，我们可以通过把图片往左移来弥补图片剪切的内容有点偏右的问题。

我们移动img标签的大小是外层div的25%，在这个例子中就是向左50px，我们可以通过设置margin-left的属性来完成设置

margin-left:-50px;

图片的主题会接近图片的水平方向中心的假设并不一定是对的，最好在你选择使用这个技巧的使用把这个假设记住。

垂直方向的图片

HTML

CSS

.circular--portrait{

position:relative;

width:200px;

height:200px;

overflow:hidden;

border-radius:50%;

}

.circular--portrait img{

width:100%;

height:auto;

}

对于垂直方向上的图片的主题在垂直方向的中心的假设当然也不适用于每一个垂直方向上的图片。

和水平方向的图片类似，外层div的宽度和高度最好等于垂直方向图片你的宽度，这样的话可以产生最好的效果。

对于垂直方向的图片，我们把宽度设置为100%，高度设置为auto(和水平方向的图片相反)

我们不需要移动这个img元素，因为这张照片的主题就在上方中心位置。

回顾

这个技巧最好适用于正方形的img标签，主题正好位于图片的中心。但是，我们的世界并不是那么完美的，所有如果需求是这样，我们就可以使用div来把长方形img标签变圆。

CSS中用来负责把图片变圆的属性是border-radius，把边的圆角变成高度/宽度的50%就可以产生一个圆。

css 剪辑图片_[译]用CSS剪切圆形图片相关推荐

css 设置表格右边有图片_我写CSS常用的方法
在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...
css 动画使用_如何在CSS中使用动画
css 动画使用使用CSS动画 (Using CSS Animations) CSS animations add beauty to the webpages and make transitio ...
node 压缩图片_推荐10个常用的图片处理小帮手（下）「值得收藏」
作者: semlinker 转发链接:https://mp.weixin.qq.com/s/i3ynTtPJOECoAYfqHFoo3Q 前言本文给小伙伴们隆重介绍用于图片处理的十个「" ...
.net pdf转图片_在客户端实现PDF转图片
今天在寻找合适的Python下PDF转图片的解决方案时,意外发现pdf.js( Mozilla贡献的一个基于 web 标准的通用 pdf 解析和渲染库.)也可以实现PDF转图片,并且是在客户端就可以实 ...
node 压缩图片_手搓一个TinyPng压缩图片的WebpackPlugin
作者: JowayYoung 转发链接:https://mp.weixin.qq.com/s/eqsZwZPCX-GZyB-EOm3TwQ 前言曾经发表过一篇性能优化的文章<「实践」细聊前端性 ...
jquery实现截取pc图片_[置顶] JQuery在线截取图片
JQuery在线截取图片 ASP.NET结构开发 1.在线截取前几天看织梦CMS,有个截图功能挺好的,可以在线选取需要截取的部分图片,然后后台截取 2.开始正文首先构建文档,样式 JQuery截取 ...
cefsharp 网页另存为图片_如何将PDF转换为JPG图片？这些转换方法一学就会
记得上学的时候,有次老师让我处理一些PDF格式文件,那时候还不熟悉这种文件,让我将这些PDF文件全部转换成图片,真的是一头雾水,费了好大的劲才将这些PDF文件转换完成.后来再遇到PDF文件我就知道怎么 ...
word涂改涂掉图片_怎么在word中修改图片的两种方法
有时我们插入的图片只有一部分是我们想要的,那就需要我们将这一部分裁剪出来,word本身就可以方便快捷的对图片进行裁剪,那么下面就由学习啦小编给大家分享下在word中修改图片的技巧,希望能帮助到您. 在 ...
qt designer 插入图片_真的不错，宁波棉服图片
真的不错,宁波棉服图片 yuiok5dl 真的不错,宁波棉服图片粘合衬:特点是前片面料及其不可分离部分的厚度比袖.背都厚,且没有加半个上身长度的毛衬.工作服的洗涤工作服的洗涤应尽量采用简易方法进行, ...
怎么打包图片_超简单的免费批量图片压缩技巧，只需3步
我们在上传图片的时候,经常会遇到一个问题,那就是图片文件太大,无法上传.那这个时候我们该怎么办呢?我们一般都会想到把图片进行压缩之后,重新上传.那么我们要怎么压缩图片呢?如果图片数量很多,能不能进行批 ...

css 剪辑图片_[译]用CSS剪切圆形图片

css 剪辑图片_[译]用CSS剪切圆形图片相关推荐

最新文章

热门文章