前端技巧在CSS里设置图片的宽高比例的方法

在CSS里设置图片的宽高比例的方法

图片网站的列表页一般都是以缩略图的形式展现内容,笔者之前在一个图片网站遇到这样一个问题:网站里有的文章缩略图是系统生成的,也有一些是手动裁剪的缩略图,手动裁剪的缩略图比例会有少许偏差,在电脑版网站上由于在CSS里定义了缩略图具体的宽高值,所以手动缩略图和系统缩略图即使比例不同也不影响展示效果,例如:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8" /> 
<title>CSS测试页面</title> 
<style type="text/css">
.demo {width:640px;overflow:hidden;}
ul {list-style-type:none;margin:0;padding:0;}
.demo li {float:left;margin:5px 0;padding:0;width:160px;}
a {color:#555;}
h5 {font-size:14px;margin:0;}
.demo li img {width:150px;height:110px;}
</style> 
</head> 
<body> 
<div class="demo">
<ul>
<li><a href="#"><div class="i"><img alt="Pic" src="s1.jpg" /></div><h5>风景图片1</h5></a></li>
<li><a href="#"><div class="i"><img alt="Pic" src="s2.jpg" /></div><h5>风景图片2</h5></a></li>
<li><a href="#"><div class="i"><img alt="Pic" src="s3.jpg" /></div><h5>风景图片3</h5></a></li>
<li><a href="#"><div class="i"><img alt="Pic" src="s4.jpg" /></div><h5>风景图片4</h5></a></li>
<li><a href="#"><div class="i"><img alt="Pic" src="s1.jpg" /></div><h5>风景图片1</h5></a></li>
<li><a href="#"><div class="i"><img alt="Pic" src="s2.jpg" /></div><h5>风景图片2</h5></a></li>
<li><a href="#"><div class="i"><img alt="Pic" src="s3.jpg" /></div><h5>风景图片3</h5></a></li>
<li><a href="#"><div class="i"><img alt="Pic" src="s4.jpg" /></div><h5>风景图片4</h5></a></li>
</ul>
</div>  
</body>
</html>

这里用于测试的四张图片宽高比例不同,但因为CSS里将宽度和高度设置了固定值,所以展示的缩略图效果很整齐:

CSS缩略图列表.png

可是当设计手机版的网站时就出现问题了,由于不同设备的尺寸可能不同,所以手机站缩略图只能通过百分比设置其尺寸,假如手机站每行显示两个缩略图,CSS应当这样定义:

<style type="text/css">
.demo {width:100%;overflow:hidden;}
ul {list-style-type:none;margin:0;padding:0;}
.demo li {float:left;margin:5px 0;padding:0;width:50%;}
a {color:#555;}
h5 {font-size:14px;margin:0;}
.demo li img {width:96%;}
</style>

这里缩略图的宽度以百分比设置,高度值不确定,而CSS里也不存在“height:0.75width”这样的定义方式,如果不定义的话,缩略图的高度会自动根据原图比例展示,网页就容易错位,如下图:

CSS缩略图列表2.png

这里有一种解决办法是通过视窗宽度单位vw来设置缩略图的尺寸,浏览器视窗宽度为100vw,相当于100%,所以可以这样设置:

<style type="text/css">
html {overflow:hidden;}
body {margin:0;padding:0;}
.demo {width:100vw;overflow:hidden;}
ul {list-style-type:none;margin:0;padding:0;}
.demo li {float:left;margin:5px 0;padding:0;width:50vw;}
a {color:#555;}
h5 {font-size:14px;margin:0;}
.demo li img {width:50vw;height:36vw;box-sizing:border-box;padding:3px;}
</style>

这里通过vw单位设置了缩略图的宽度和高度,宽度50vw表示一半的视窗宽度,高度36vw是按预想的比例估算的数值,这里设置box-sizing:border-box以便于设置图片的内边距,效果如下图:

CSS缩略图列表3.png

有时候即使是手机版网站,其网页总宽度也并不都是100%,比如有的手机页面总宽度设置了max-width属性,这时候通过vw设置图片尺寸就不方便了,还有一个解决方案是利用padding的特性,在CSS中padding-top或padding-bottom的百分比值是根据容器的宽度计算的,所以CSS可以这样定义:

<style type="text/css">
html {overflow:hidden;}
body {margin:0;padding:0;}
.demo {max-width:768px;overflow:hidden;}
ul {list-style-type:none;margin:0;padding:0;}
.demo li {float:left;margin:5px 0;padding:0;width:50%;}
.i {position:relative;width:100%;height:0;padding-top:75%;}
a {color:#555;}
h5 {font-size:14px;margin:0;}
.demo li img {width:100%;height:100%;box-sizing:border-box;padding:3px;
position:absolute;left:0;top:0;}
</style>

这里给缩略图外层容器设置了高度为0,padding-top的百分比值将容器固定为4:3的宽高比,再通过定位的方法让图片填充这个容器,也就间接实现了“height:0.75width”的效果了。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.flooren.com.cn/skill/115.html