用CSS情况特性替代照片SRC

日期:2020-10-24 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

没多久以前, 我详细介绍了1个应用WordPress 原生态缩略图的小窍门, 有关怎样应用 WordPress 提交照片转化成的缩略图做为文章内容目录中的预览图, 而且留下了两个难题给同学们思索, 第1个难题是:
假如照片高宽比或宽度不够 150px, 这样做必定将照片拉伸, 很不美观大方. 用甚么方法可让照片都显示信息为 150x150, 并垂直居中显示信息? 能够用 CSS 完成...
跟帖中有同学得出了1些处理方法, 都说得很好, 可是我還是想说说自身常见的解决方法. 我这也并不是甚么高超的方法, 5 年前就有人在用, 但它便捷便捷.

基本原理很简易, follow me.
给 IMG 元素1个全透明照片. 能够采用 GIF 照片, 由于文档头较为小, 照片 1px*1px 便可以了. (真扣!)
设置照片的宽和高. width="150" height="150"
随后根据 style 特性的 background 将必须显示信息的照片详细地址做为情况显示信息在 IMG 元素上.
照片的 background-position 设为 50% 50%.

Okay, 大家早已获得1个不拉伸的, 竖直和水平垂直居中的缩略图. 事例看下面.

拷贝编码
编码以下:

<img src="{某全透明照片的 URL}" alt="脚本制作之家" style="background:url(https://www.jb51.net/images/logo.gif) no-repeat 50% 50%;width:150px;height:150px;" />

此外, 较为常见的方式也有用 JavaScript 在 DOM ready 的情况下将照片加载, 并根据测算照片和外框的尺寸为照片再加 margin 令照片垂直居中. 这样可让 document 优先选择载入, 确保网页页面显示信息速率, 可是, 1旦照片数量较为多, IE 将会会卡.

好了, 技术性说完了8卦1下. 5 年前产生了甚么? 记恰当时我刚买测算机, 上网免费下载照片一直免费下载到1个全透明的 GIF 照片, 百思不可其解, 因此科学研究了1番 (当年的小白很杯具). 后来发现网站上的照片全是根据情况的方法显示信息出来的. 尽管网站要避免客户在网页页面左右载照片基本上是不能能的, 可是这个简易的方式至少能够保证两点.
确保另存网页页面的情况下不容易免费下载网页页面上的照片.

粗心大意的客户免费下载了很多照片后才发现免费下载免费下载的所有是全透明照片.