VeryUE

非 常 悠 逸

Tag: 图片

一蘭

一蘭

去除 Windows Live Photo Gallary 文件关联

Windows Live Photo Gallary

微软 Windows Live Photo Gallary (Windows Live 照片库)是 Windows Live Essentials 套件中的照片管理工具,集照片查看、编辑、上传整理等功能于一体。它完美继承了微软软件给我的“硬邦邦”的感觉,完全没有 Picasa 的平滑质感。Picasa 是我的主力图片查看、编辑工具,而能让 Live Photo Gallary 留在我硬盘里的理由无非是可以用它来上传照片到超大容量的 Skydrive 中,虽然现在看来这个目的在微软降低 Skydrive 容量,而Google 在一定程度上实现了无限上传后也越来越无力。不过由于 Google 服务的“伪”不稳定性和微软没有赶尽杀绝的态度(老用户依然有25GB存储空间),Live Photo Gallary 还是有一定用处的。

不过让人非常不爽的是,Live Photo Gallary 会在软件安装后自动关联一些图片格式,最不能接受的是难以在界面中找到去除关联的方法,即使让其他软件关联也不是都可以成功的:不愧是微软的自家产品,太“亲”了! 点击继续阅读全文»

图片压缩工具推荐

compress-photo

一个网页的大小往往是由图片的大小决定的:整个网页的文字大小可能没有一张图片所占的空间大。因此,图片的大小会显著影响网页的打开速度。图片压缩也就成了 Blogger 的必修课。这里推荐几个在线和本地工具,可以帮助我们有效地压缩图片大小。

在线工具

1 PunyPNG

PunyPNG 称自己为设计师和开发者的图片压缩器,它最大的优点是可以 Dramatically 地减小图片大小,而且是无损压缩。它甚至有一个页面专门比较了其与 Smush.it、OptiPNG 和 ImageOptim 的压缩率。至少从这个页面的结果来看它确实名不虚传。

PunyPNG 最大的劣势在于其对图片大小做了限制:不能大于100KB。并且每次不能超过10个文件。PunyPNG 支持 PNG、JPG 和 GIF 三种格式,较为全面。 点击继续阅读全文»

WordPress文章图片准确居中

Manifest是一个非常好的Wordpress主题,为了使它更加好用,我对它进行了一系列的修改。然而在修改过程中却发现了一个Wordpress本身的问题:文章中的图片总是不能准确居中。

先说一下,我添加文章图像的方法主要有两个:

  1. 不带“图像说明”,即在编辑图片时将“说明”字段留空。
  2. 带有“图像说明”,在编辑图片时填入“说明”字段,在文章中最终显示图片下的为一段描述。

在添加图像时会选择居中,可以看到在第一种情况下,产生的HTML内容为:

1
2
3
<p style="text-align: center;">
<img class=" aligncenter" height="154" width="366" alt="alt" src="src.png" title="title" original="original.png" style="display: inline;">
</p>

即图片被放在了一个段落标签<p>中,通过添加<p>标签的sytle属性text-align: center;,使图片居中显示。

而在第二种情况(带有图片说明文字)时,产生的HTML内容为:

1
2
3
4
<div class="wp-caption aligncenter" style="width: 376px">
<img class=" " height="154" width="366" alt="alt" src="src.png" title="移除成功提示" original="original.png">
<p class="wp-caption-text">你的图片说明</p>
</div>

可以看到,这时图片被放在了一个<div>中,此时,<div>被加上了class属性,而且样式中定义了宽度。这样我们就要在style.css中添加样式使图片居中。也就是说,如果发现在编辑文章时选中了图像居中却无法实现居中就是因为在样式表中没有为其定义样式。

我使用如下CSS代码实现图片居中和说明文字与图片左对齐:

1
2
3
4
5
6
7
8
9
.entry-content .wp-caption.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
#coreContent .entry-content p.wp-caption-text {
text-align: left;
}

理论上,至此我们就实现了图片居中显示,无论是否添加了说明文本。

但实际上我们发现第二种情况(添加了说明文字)出现图片和说明文字并不是严格左对齐的情况;当图片与body等宽时,图片还会超过body的边界。再仔细查看此时的HTML代码。我发现,div标签强制定义了宽度为376px,比实际的图片宽度大了10px,这就导致了图片在此div中居中时,向右偏移了5px。所以,我们必须使div宽度等于实际的图片宽度。

在Wordpress Support中有人提出了三个解决方法: 点击继续阅读全文»

无觅相关文章插件,快速提升流量