首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

UIImageView 使用 padding 为图片设置内边的 2 种方案

一、前言 不像 Flutter / swiftUI 那样,UIimageView 并没有现成的 这里介绍两种为 UIImageView 内图片设置的方法均为自定义方法 二、方案 包括两种方案 第一种...:借鉴 stackoverflow 上大佬提出的 第二种:我自己优化的 2.1 设置 UIImage 大小 先设置 UIImage 的大小,再将其放入 UIImageView设置 contentMode...2.2 方案一使用 在设置 UIImageView.image 是调用即可 xxxUIImageView.image = imageWithImage(image: UIImage(named:...类新增拓展方法 该方法是对 stackoverflow 方案的改良版,不需要提前给定图片大小 通过设置内边的大小,就可以自动适应、调整 设置上更为方便,同时能自动兼容各种图像 extension UIImageView...2.4 方案二使用 分两步走,可以在 config 时直接设置 如果你的 UIImageView 不断的变化,那么可以把 padding 移到 layoutSubviews 中调用,以便同步视图刷新

2.1K10
您找到你想要的搜索结果了吗?
是的
没有找到

iOS设置圆角及圆形图片

方方正正的样式往往显得很生硬,而圆角的样式让人产生别样的亲切感,现在越来越多地用到圆角,诸如用户头像之类的图片也大都用圆形来显示,本文就介绍如何设置按钮、文本框的圆角以及制作圆形的图片。...对于圆形的头像,要制作正圆,我们需要首先设置UIImageView的高宽的一致的,然后我们设置其圆角角度为高度除以2即可,相当于90度,代码如下: // 圆形头像 UIImageView *avatarImgView...UIColor colorWithRed:228.0/255.0 green:117.0/255.0 blue:97.0/255.0 alpha:1.0]]; // 按钮圆弧,以高度的一半为圆角,两形成完整的半圆...UIColor colorWithRed:228.0/255.0 green:117.0/255.0 blue:97.0/255.0 alpha:1.0]]; // 按钮圆弧,以高度的一半为圆角,两形成完整的半圆...,我们设置边框宽度为1,就可以显示边框了,然后同样设置圆角为4: // 带边框的圆角Label UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake

1.8K20

前端课程——盒子模型

相关概念 内容区(content) 用于显示文本和图像 内边(padding) 内容区至边框 边框(border) 内容区的边界 外边(margin) 两个元素的之间的距离...当距离等于外部容器的一半时就形成了一个原型 边框图像 使得边框可以引入图像,从而免去在某些情况下使用九宫格了。...在最终的边框图像中重复,缩放或修改它们以匹配元素的尺寸。 区域 9 为中心区域。它在默认情况下会被丢弃,但如果设置了关键字fill,则会将其用作背景图像。...或为单个值,设置所有的边框;或为两个值,分别设置水平与垂直的边框。 border-image-outset 定义边框图像可超出边框盒的大小。...该模型设置元素在HTML页面中所占区域为内容区+内边+边框的宽度+外边。 ●border-box: 称为怪异盒子模型,最早是由微软提出的。

1.1K10

前端入门学习--CSS

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。...+下边框+上边+下边 浏览器的兼容性问题 一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。...也就是,不要给元素添加具有指定宽度的内边,而是尝试将内边或外边添加到元素的父元素和子元素。 IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。...Margin - 单边外边属性 在CSS中,它可以指定不同的侧面不同的: <!...使用CSS来添加背景、格式化文本、以及格式化边框,并定义元素的填充和

27.6K20

CSS学习笔记二

和height指的是内容区域的宽度和高度;增加内边边框和外边不会影响内容区域的尺寸控件,但是增加元素框的总尺寸; ?...) 边框颜色: border-color属性:定义边框的颜色 定义单边颜色(方法雷同) 总结: 属性 描述 border 简写属性,用于把针对四个的属性设置在一个声明。...border-style 用于设置元素所有边框的样式,或者单独地为各设置边框样式。 border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。...border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个分别设置颜色。 border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。...框1从右侧向左侧浮动,由于不占用文档空间,所以框1覆盖框2 ? 如果所有框都向左移动,那么框1接触到元素框的边框停止,另外两个框接触到前一个框的边框,停止浮动。 ?

1.2K30

CSS快速入门(三)

你也可以使用关键字: cover —浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。在这种情况下,有些图像可能跳出盒子外 contain — 浏览器将使图像的大小适合盒子内。...在这种情况下,如果图像的长宽比与盒子的长宽比不同,则可能在图像的任何一或顶部和底部出现间隙。 在下面的例子中,我使用了上面例子中的大图,并使用长度单位来调整方框内的大小。你可以看到这扭曲了图像。...垂直方向的内边、外边以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。 水平方向的内边、外边以及边框会被应用且会把其他处于 inline 状态的盒子推开。...Padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。 Border box: 边框盒包裹内容和内边。大小通过 border 相关属性设置。...大小通过 margin 相关属性设置; 通俗理解 以快递盒为例 1.快递盒与快递盒之间的距离 外边(标签之间的距离) 2.快递盒的厚度 边框 3.内部物品到盒子的距离 内边

1.3K20

Java学习笔记-全栈-web开发-02-css必备基础

常用属性: width:设置元素的宽度 height:设置元素的高度 5.5 列表 CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。 常用属性: list-style:简写属性。...5.9 分类 CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。...CSS border 属性允许你规定元素边框的样式、宽度和颜色。 常用属性: border:简写属性,用于把针对于四个的属性设置在一个声明。...border-color:简写属性,定义元素边框中可见部分的颜色,或为四个分别设置颜色。 border-style:用于定义所有边框的样式,或者单独为各设置边框样式。...6.2 外边 围绕在元素边框的空白区域是外边设置外边会在元素外创建额外的“空白”。 设置外边的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

1.7K30

css面试点一:盒模型详解+遗漏点

什么是css盒子模型 可以说,页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型,盒模型由外而内包括:(margin)、边框(border)、填充(padding)、内容(content...可通过BOX-SIZING进行设置 width和height:内容的宽度、高度(不是盒子的宽度、高度)。盒子的内容,显示文本和图像。 padding:内边。清除内容周围的区域,内边是透明的。...border:边框。围绕在内边和内容外的边框。 margin:外边。清除边框外的区域,外边是透明的。...这些浏览器的 width 属性不是内容的宽度,而是内容、内边边框的宽度的总和。 IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。解决IE8及更早版本不兼容问题可以在HTML页面声明<!...假如不用doctype声明,那么各个浏览器根据自己的标准去解析网页,即ie浏览器采用ie盒子模型去解析盒子模型,而 Chrome浏览器采用标准w3c盒子模型解析盒子, 使用doctype声明,那么所有浏览器都会采用标准

43240

iOS编程101:如何创建圆形头像和圆角图片

同时,将用户头像图像UIImageView)与ProfileViewController.h中的profileImageView属性关联起来。 ?...所以上面的第一行是设置layer对象(CALayer类的一个实例)的圆角半径。将方形图像变成圆形图像,半径应设置UIImageView宽度的一半。例如,如果方形图像的宽度是100像素。...只需两行代码,图像从方形变为圆形。无需Photoshop。 添加边框 接下来,我们给头像添加边框使它更漂亮点。同样,也只需要两行。...= [UIColor whiteColor].CGColor; 我们只是设置边框的宽度和边框颜色。...再次编译并运行应用程序,您现在应该看到一个拥有白色边框的头像。 创建圆角图片 你可以使用同样的方法来创建圆角图像。关键是要改变圆角半径,并将其设置为其他值。

2.1K20

CSS——属性列表

2min-widthmin-width 规定元素设置最小宽度。2widthwidth规定元素内容区的宽度。1 元素描述版本marginmargin规定元素中四个方向的外边属性。...1paddingpadding规定元素的内边,该属性不可为负值,其简写形式可一次性设置四个的内边。1padding-bottom设置元素的下内边。1padding-left设置元素的左内边。...3border-imageborder-image 该属性用作给元素的边框添加背景图片。使用该属性时,替换掉 border-style 属性所设置边框样式。...3border-image-repeatborder-image-repeat 该属性用于规定图片如何填充边框。单个值,设置所有的边框;两个值,分别设置水平和垂直的。...3border-image-sliceborder-image-slice 该属性用于划分边框图片在9个区域所制定的图像:4个角,4个和中间。

2.5K10

【CSS】盒子模型内边 ① ( 内边概念 | 内边设置语法 | 内边设置效果 | 代码示例 )

文章目录 一、内边 1、概念 2、内边设置语法 3、内边设置效果 二、内边代码示例 1、不设置的示例 2、设置的示例 一、内边 ---- 1、概念 内边 是 盒子 的 边框 与...内容 之间的 间隔长度 ; 下图中 , 中心 100 x 100 像素 的 是内容 , 内容外侧 , 边框内侧 , 就是 内边 范围 ; 2、内边设置语法 内边设置语法 : padding-left...: 为 盒子模型 设置 内边 Padding 后 , 在 盒子内容 与 盒子边框 中间 , 产生一个内边 , 与此同时 盒子模型 的 尺寸 变大 ; 二、内边代码示例 ---- 1、不设置的示例...target="_blank"/> div { width: 200px; height: 200px; /* 设置边框...使用标尺测量 盒子模型的宽高都是 200 像素 ; 宽度 200 像素 : 高度 200 像素 : 2、设置的示例 为 盒子模型 设置 左边 和 上边 , 代码为 : <!

83230

CSS 基础

,这种颜色会填充元素的内容、内边边框区域,扩展到元素边框的外边界(但不包括外边),如果边框有透明部分(如虚线边框),透过这些透明部分显示出背景色 background-color 的值有一般三种设置方式...,元素的背景占据了元素的全部尺寸,包括 内边边框,但不包括外边 background-color: red; background-image:url(); /*指向图像的路径*/ background-repeat...background-attachment:fixed; /*背景图固定在窗口,以浏览器窗口为参考基准*/ 值 描述 scroll 默认值,背景图像随着页面其余部分的滚动而移动 fixed 当页面的其余部分滚动时...+ padding + content 四个部分组成 margin 简写属性在一个声明中设置所有外边属性 border 简写属性在一个声明设置所有的边框属性 padding 简写属性在一个声明中设置所有外边属性...content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容 border-style 属性,用于设置元素所有边框的样式,或者单独地为各设置边框样式,只有当这个值不是 none

3.2K40

CSS基础——盒子模型

:200px; /* 设置盒子的高度,此高度是指盒子内容的高度,不是盒子整体高度(难点) */设置边框:设置边框,比如顶部边框,可以按如下设置:border-top:10px solid red;...说明:其中10px表示线框的粗细;solid表示线性;red表示边框的颜色设置其它三个的方法和上面一样,把上面的'top'换成'left'就是设置左边,换成'right'就是设置右边,换成'bottom...四个如果设置一样,可以将四个设置合并成一句:border:10px solid red;设置内间距padding设置盒子四的内间距,可设置如下:padding-top:20px; /*...*/ padding:20px 40px; /* 设置上下内边为20px,左右内边为40px*/ padding:20px; /* 设置内边为20px */设置外间距margin外边设置方法和...border:边框。margin:外边盒子的真实尺寸只会受到宽度、高度、边框、内边四个属性的影响,不会受到外边属性的影响。

61830

【CSS】课程网站头部制作 ⑤ ( 用户栏测量 | 用户栏代码编写 | 代码示例 )

/ color: #666666; } /* 用户栏 头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素 容器高 42 上下各 6 像素...li { list-style: none; } /* 清除按钮默认样式 ( 主要是按钮自带的边框 ) */ button { border: none; } /* 设置总体背景 */ body.../* 高度 38 像素 但是盒子大小 42 像素 , 设置 40 加上 2 像素边框正好充满 */ height: 40px; /* 1 像素边框 */ border: 1px solid #00a4ff...; /* 没有右边框 */ border-right: 0; /* 文本左侧有 20 像素内边 */ padding-left: 20px; /* 设置文本颜色 */ color: #bfbfbf.../ color: #666666; } /* 用户栏 头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素 容器高 42 上下各 6 像素

2.4K30

从头学前端-CSS基础03

1.盒子模型盒子模型组成:> 盒子模型组成的主要有 边框border,外边margin ,内边padding,内容content;- 边框border:> border可以设置元素的有三部分...,宽度,验收,颜色> border: border-width || border-style || border-color> 边框四个可以分开来写,如border-top:> border-collapse...:collapse可以合并表格的相邻边框> 边框影响盒子的实际大小;增加盒子大小,盒子的总大小为宽度或高度加上两个边框的大小;- 内边> padding用于设置内边,即盒子边框和内容的距离.默认是...设置边框 border {1px } > 设置内边 > 添加overflow: hidden> 浮动的盒子不会有这个塌陷问题 --- > 清除内外边: 不同的网页元素带有不同的内外边,不同浏览器也不一样...,此时考虑清除内外边; * { margin:0 padding:0 } > 行内元素尽量只设置左右边,考虑兼容性问题; CSS3盒子属性圆角边框:> 用于设置元素的外边框圆角> border-radius

65920
领券