一张正方形图片,伴随我一年半,敢问情绪的使用方法

【问题的由来】

  1. 图片适配正方形显示方法一

    <style>
    .box{width:400px;height:400px;border:solid 5px red;margin:0 auto;background:#f4f4f4 url() no-repeat center;background-size:cover;}
    </style>
    <div class="box" style="background-image:url(http://data.upfitapp.com/data/2017/08/12/1722315025297765877.jpg);"></div>
  2. 图片适配正方形显示方法二

    <style>
    .box2{width:400px;height:400px;border:solid 5px red;margin:0 auto;}
    </style>
    <div class="box2" style="background:#f4f4f4 url(http://data.upfitapp.com/data/2017/08/12/1722315025297765877.jpg) no-repeat center;background-size:cover;"></div>

【说明】

方法二是我这一年半以来一直使用的方法,没错每次需要适配图片的时候,我都要在每个div上写上一遍;

直到刚刚,我刚刚因为移动端回车按键脸红,还没有消退,有爆发了一个无比搞笑的事情

【为什么】

为什么,我这么长时间,一直使用方法二,而不是方法一呢?看明白的同学,都知道,两种方法对比,方法一和方法二差好几个量级;

而我却用了一年半,回溯曾经探索不同尺寸的图片要显示在正方形里面,我走过了很多个路口:

  1. 最开始想各种办法在img标签上下功夫,但是发现在不知道图片宽高数据,还要适配各种奇形怪状的尺寸,这种方法的实现难度过大,需要进行大量的JS操作,在开发上、性能上和后期维护都是不可取的
  2. 当时项目催的很急,我的水平也一般般,情急之下,在网上找了N多的插件,最后选择了一个可以裁剪的插件,在图片的源头进行限制,加上img标签就可以了;问题是别人的插件在使用过程中性能问题和一些定制化方便实在是让我烦不胜烦;我现在基本上都是自己写需要的插件,不在做伸手党,伸手党的苦,源自与那种无奈的折磨
  3. 自己当时正在研究CSS3性特性,发现了background-size这个样式加上background的其他样式就可以各种比例的图片显示成为正方形;而后我希望能够用background把background-size也包含就去,这样代码量会少很多;而正是这种方法的失败,导致了后续被自己坑了一年半;当时的想法是全部用background简写,没有找到合适的规则写法,而且研究的时候,资料也说过尽量不要用background包含全部;浏览器解析起来比较麻烦,也影响性能
  4. 图片地址来源于后台数据请求,所以肯定不能下载CSS里面,都一样怎么玩耍;所以需要写在HTML标签里面,我试验了很多次,发现使用方法一种的写法,就必须把background-size一起写在里面,不然size样式不生效;当时很苦恼,但却只能这样;知道今天

【茅塞顿开】

类似简写方法,其实有很多样式都有,比如:padding、margin等,由于background包括background-size,而background-size的默认值auto,导致了其失效;

情绪的力量,每次开发到这块,自己都由些许情绪,仔细了解才知道,为了一个图片地址,我要写那么多重复的代码,而我还乐此不疲的不去深入思考为什么;

管理情绪,情绪给我们的最大帮助就是发现问题,而我们不应该不知所措,自乱阵脚;而应该去接触和了解它,知道这是不是一个问题,是问题,如何解决呢?及时没有立刻解决也要在大脑中留个疑问;

灵感的来源就是自己大脑中有多少个为什么,为什么越多灵感也就越多;

时间: 2024-10-18 10:24:23

一张正方形图片,伴随我一年半,敢问情绪的使用方法的相关文章

一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标

一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标 ,如下图 可以使用  background background:url(images/xx.png) 40px 10px no-repeat;

一张jpg图片实际加载过程内存消耗

一张jpg图片实际加载过程内存消耗,以一张1024*1024 argb8888 500k的jpg图片为例: a.读取图片文件(消耗图片大小内存,500k)     b.解析jpg数据(cgimage, 4mb) c.释放500k的图片内存    d.opengl纹理数据(4mb)    e.释放cgimage的4mb内存.      注意,这个过程不是必然的顺序执行,释放cgimage内存的实际是有系统决定的,会很快,但是不一定是立即执行.  所以内存会瞬间飙升9mb左右,然后减少5mb,稳定到

Atitit 判断判断一张图片是否包含另一张小图片

1. keyword1 2.  模板匹配是在图像中寻找目标的方法之一(切割+图像相似度计算)1 3. 匹配效果2 4. 图片相似度的算法(感知哈希算法”(Perceptual hash algorithm)2 5. 性能结果2 6. 如何提升性能3 6.1. 可以采用简化的算法.二次匹配法,先大概确定区域3 6.2. 切割图片设置一个step3 7. 参考资料3 8. ------code3 1. keyword 图像匹配 图片是否另外一张图片的一部分 如果是标准图片,模板匹配就好 2.  模板

读取多张MNIST图片与利用BaseEstimator基类创建分类器

读取多张MNIST图片 在读取多张MNIST图片之前,我们先来看下读取单张图片如何实现 每张数字图片大小都为28 * 28的,需要将数据reshape成28 * 28的,采用最近邻插值,如下 def plot_digit(data): img = data.reshape(28,28) plt.imshow(img,cmap=matplotlib.cm.binary,interpolation='nearest') plt.axis('off') import matplotlib.pyplot

Django中,图片显示问题--Django中静态文件处理方法指南

html网页中要显示一张JPG图片,可是怎么放都是显示不了. 后来搞明白,这个涉及静态文件的处理方法. 在urls.py中添加一行: urlpatterns = patterns('', (r'^site_media/(?P<path>.*)','django.views.static.serve',{'document_root':'E:/media'}), }然后在html页面中,写入 <p><img src="/site_media/gmshi.jpg&quo

【Python网络爬虫四】多线程爬取多张百度图片的图片

最近看了女神的新剧<逃避虽然可耻但有用> 被大只萝莉萌的一脸一脸的,我们来爬一爬女神的皂片. 百度搜索结果:新恒结衣 1.下载简单页面 通过查看网页的html源码,分析得出,同一张图片共有4种链接: {"thumbURL":"http://img5.imgtn.bdimg.com/it/u=2243348409,3607039200&fm=23&gp=0.jpg", "middleURL":"http://i

【Python网络爬虫四】通过关键字爬取多张百度图片的图片

最近看了女神的新剧<逃避虽然可耻但有用>,同样男主也是一名程序员,所以很有共鸣 被大只萝莉萌的一脸一脸的,我们来爬一爬女神的皂片. 百度搜索结果:新恒结衣 本文主要分为4个部分: 1.下载简单页面 2.爬取多张图片 3.页面解码 4.爬取过程排错处理 1.下载简单页面 通过查看网页的html源码,分析得出,同一张图片共有4种链接: {"thumbURL":"http://img5.imgtn.bdimg.com/it/u=2243348409,3607039200

iOS-AFNetworking3.0上传大量(1000张)图片到服务器

背景: 最近项目要做上传图片功能,图片必须是高清的,所以不让压缩,上传图片是大量的,比如几百张,这个如果是用afn,将图片直接for循环加入到formData里会出现一个问题,临时变量太多,导致内存紧张,最后程序奔溃.之前写过用自动释放池解决它,但是还是效果不大.如果上传的多的话,内存还是受不了. 解决办法一适用于图片少量的如40张图片 我之前写的在这,可以看看自动释放池的方法,如果你上传图片的数量不多的话,可以用这种方法.也很简单的.链接在这里http://www.jianshu.com/p/

Photoshop制作Android UI:怎样从大图片中准确剪切出圆角正方形 图片

如题所看到的,最初我是直接用PS的剪切工具,但发现有时不太好用. 由于你必须提前设好要剪切的尺寸. 也可能是我这小白不知道咋用. 下为摸索到的最好方法: 1.打开原图.新建图层,假设是png图片就不用新建图层了. 2.选择工具栏里的圆角矩形工具.快捷键U.在上面能够设置圆角的半径. 另外还要设置模式为路径而非形状图层. 3.先按下shift,就会成正方形选择.然后就拉区域,最后先松开鼠标.再松开shift.得到下图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi