摘要
本文详细列出代码日志中图片尺寸宽高参数定义的各种组合，并就一实例说明定义宽、高值对图片在日志中显示效果的影响，指出了日志中图片变形的原因和解决办法，最后提出了如何简单正确定义图片尺寸和文字方框尺寸的技巧。
——瑾以此文献给做代码日志还不能正确设置图片尺寸和文字方框尺寸的朋友们，愿你们日志做得更完美、更精彩！
做代码日志离不开添加图片和书写文字。日志中的图片总是根据自己的要求来定义尺寸。日志中的文字一般放在一个定义的区域方框内，即标签<div>和</div>之间。如何正确定义图片尺寸和文字方框尺寸，需要一点技巧。如果定义不当，会出现下面两种情形：
- 图片宽高比例严重失调，导致图片畸形：过分挤压或拉长（图片严重失真！）。
- 文字溢出定义的方框区域外被隐藏：读者无法阅读全部内容。
本文根据自己的音画制作经验，就如何简单正确定义图片尺寸和文字方框尺寸，而使图片不变形、文字不溢出，提出几点技巧与大家分享。
日志中加载图片的代码如下：
<img alt="图片名" style="width:宽度px;height:高度px;" src="图片网址" />
以上图片中的宽度和高度是指该图片放在日志里的宽度和高度，而不是指图片原始尺寸的宽度和高度。图片的原始宽高值，可以用鼠标右点击图片属性显示如下：
可见该照片的原始尺寸是：宽度=533px 高度=800px，宽高比=533/800=0.666 所以我们在设置该照片在日志里尺寸的时候，如果想让照片不变形，其宽高比应该也是 0.666。例如：高度=1000px，那么宽度应该是 1000 x 0.666 = 666px 即
<img alt="图片名" style="width:666px;height:1000px;" src="图片网址" />
以上设置是把照片尺寸放大了1000px/800px=1.25 倍。同样也可以缩小尺寸，但宽高比必须保持0.666。
在讲如何定义图片尺寸之前，先来说明一下图片代码的宽高属性参数：
style="width:宽度px;height:高度px;"
需要强调的是，这些参数都是选择性的（optional)，也就是说它们可有可无。所以加图片代码有下面四种组合：
- 宽高属性全省略：
<img alt="图片名" src="图片网址" /> - 宽高属性全定义：
<img alt="图片名" style="width:宽度px;height:高度px;" src="图片网址" /> - 仅定义宽度属性：
<img alt="图片名" style="width:宽度px;" src="图片网址" /> - 仅定义高度属性：
<img alt="图片名" style="height:高度px;" src="图片网址" />
根据以上四种不同图片的属性参数定义，浏览器显示图片的结果如下：
- 宽高属性全省略：
浏览器使用图片的原始尺寸。以上图片为例，图片在日志里显示的宽度为533px、高度为800px。 - 宽高属性全定义：
这种宽高属性全定义就需要一点技巧。因为定义的不当，不能维持原图片的宽高比，就会导致图片变形：挤压或拉长。
例如如果设定：宽度为250px, 高度为500px，即
<img alt="图片名" style="width:250px;height:500px;" src="图片网址" />
其宽高比为250/500=0.5，该值小于原图宽高比0.666，从而导致图片纵向挤压如下：
如果设定：宽度为500px, 高度为500px，即
<img alt="图片名" style="width:500px;height:500px;" src="图片网址" />
其宽高比为500/500=1.0，该值大于原图宽高比0.666，从而导致图片横向拉长如下：
如果设定：宽度为500x0.666=333px, 高度为500px，即
<img alt="图片名" style="width:333px;height:500px;" src="图片网址" />
其宽高比为0.666，该值等于原图宽高比0.666，这样图片就不会变形如下：
- 仅定义宽度属性：
顾名思义，仅定义图片的宽度值。
如果图片宽度属性参数设定333px, 高度不设定，即
<img alt="图片名" style="width:333px;" src="图片网址" />
结果显示如下：
- 仅定义高度属性：
仅定义图片的高度值。
如果图片高度属性参数设定500px, 宽度不设定，即
<img alt="图片名" style="height:500px;" src="图片网址" />
结果显示如下：
我们发现，如果仅定义图片宽度或高度值，浏览器会自动正确（成比例）计算出另一个尺寸。如果我们给定宽度和高度值，我们自己就必须正确成比例地给定这两个值，否则图片就会变形走样！因此，我们做日志时，简单的方法就是只设定宽度值或高度值，这样定义图片尺寸，既简单又不会变形！
知道了浏览器会根据给定的宽度或高度值，自动成比例算出高度或宽度值，我们就很容易知道如何定义文字方框的尺寸了。
我发现有些代码日志，给定了文字方框宽度和高度两个参数如下：
<div style="position:absolute;left:左边坐标值px;top:高度坐标值px;width:方框宽度值px;height:方框高度值px;">
文字内容。。。。。。。
</div>
但是，一般我们只关心的是方框的宽度值，高度值应该随文字内容长短而定，预先是不知道的。如果我们高度值设置的太小了，溢出的文字往往被隐藏而看不见了。常见的做法是，事先设定一个很大值，但这种做法不是很理想。简单的方法或者说技巧是：我们仅给定文字方框的宽度值，而不去设定方框的高度值，即
<div style="position:absolute;left:左边坐标值px;top:高度坐标值px;width:方框宽度值px;">
这样浏览器就会自动根据文字内容的长短自动纵向延伸。
文章评论