小技巧之padding-bottom实现等比例图片缩放

【小技巧之padding-bottom实现等比例图片缩放】的更多相关文章

小技巧之padding-bottom实现等比例图片缩放

1.padding-bottom 如果用%来表示的话,计算是根据父元素的width的值进行计算的. 例:父元素.wrapper的width是100px,height设置为0, padding-bottom的值是50%,则该元素的高是50px 2. 百分比方法适用于的场景:一个图片需要全部显示出来,而且图片本身的宽高比例不变,能够随着屏幕的大小进行变化. 3.实现等比缩放的效果,还可以通过vw来设置,缺点:有的浏览器不支持. 下面是例子中css.wrapper中可以替换为 .wrapper{ wi…

小技巧，如何在Label中显示图片

这个需求其实是有的,比如QQ聊天界面里面发送的信息,可以用label来显示文字(也可以用button显示),但是有时候用户可能会发送图片.如果能让Label遇到文字就显示文字,遇到图片就显示图片就好了.可能有的人会说用Quartz2D,直接在Label的drawinrect 里面用上下文画上去.但这感觉太刻意去弄了,而且比较麻烦. 如果你不是在董铂然博客园看到本文,请点击查看原文推荐一种用Label系统的属性来做. UIImage *image = [UIImage imageNamed:@"…

iOS 开发中使用到的小技巧汇总

国庆即将来到,一个小项目也即将完成,把自己在项目中用的一些小技巧写出来,方便查找. 1,去掉分割线--动画设置透明度alpha //去掉tableView的分隔线: self.tableView.separatorStyle=UITableViewCellSeparatorStyleNone; self.tableView.showsVerticalScrollIndicator=NO; 2. 解决cell分割线左边短20px的问题 -(void)viewDidLayoutS…

CSS 小技巧

CSS 小技巧一.边框内圆角我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width: 200px; height: 80px; padding: 10px; background: rgb(255, 187, 51); #content { display: flex; justify-content: center; align-items: center; height: 1…

Android小技巧

一.android:clipChildren属性效果图看到这个图时你可以先想想如果是你,你怎么实现这个效果.马上想到用RelativeLayout?NO,NO,NO,,, 实现代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android…

cssfloat布局以及其他小技巧

css float 布局以及其他小技巧总结这篇博文前面四个部分是关于css 经典布局如果你已经知道了可以直接跳过看第六部分 css 的其他小技巧 1.0 左右居中布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .parent {…

前端网络、JavaScript优化以及开发小技巧

一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN缓存通过构建工具Gulp,可以在开发的时候就将合并压缩的事情一起做掉. 之所以要做合并压缩是因为:HTTP 1.x不允许一个连接上的多个响应数据交错到达(多路复用),因而一个响应必须完全返回后,下一个响应才会开始传输. 也就是说即使客户端同时发送了两个请求,而且CSS资源先准备就绪,服务器也会先发…

iOS：小技巧（不断更新）

记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] delegate] window]; CGRect rect=[_myButton convertRect:_myButton.bounds toView:window]; 2.UIImageView 和UILabel 等一些控件,需要加这句才能setCorn _myLabel.layer.mas…

你想的到想不到的 javascript 应用小技巧方法

javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x…

css的小技巧

前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素垂直居中 html, body { height: 100%; ; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;…