关于用CSS控制图片大小和比例的有关问题
日期：2014-05-17 浏览次数：20757 次
关于用CSS控制图片大小和比例的问题
想了半天还是没解决，只能上论坛求助了。
要求如下：
一个长宽固定的图片容器（就假如是个100px x 100px的div吧，overflow:hidden)
里面有个<img> tag，图片源尺寸不一定，有大有小。
如果图片源尺寸为高200，宽150，那么应把高度裁剪50个像素（头部25像素，尾部25像素）然后等比缩放到100 x 100
如果图片源尺寸为高150，宽200，那么应把宽度裁剪50个像素（左边25像素，右边25像素）然后等比缩放到100 x 100
现在问题就是我知道单独指定一个宽度或高度，留下另一个属性不指定，可以让缩放的图片保持比例，但横向过长的图片或高度过高的图片总有一种会不满足条件
如果把图像设置成max-height:100px; max-width:100px虽然可以保持比例，但非正方形图片填不满100x100的容器。
不知道在不借助后台程序或javascript判断的情况下，如何用css满足我的要求？
------解决方案--------------------
如果图片源尺寸为高200，宽150，那么应把高度裁剪50个像素（头部25像素，尾部25像素）然后等比缩放到100 x 100
如果图片源尺寸为高150，宽200，那么应把宽度裁剪50个像素（左边25像素，右边25像素）然后等比缩放到100 x 100
这样子是不是图片不怎么和谐了
效果是可以做的 图片外面套个正方形DIV，overflow:hidden，然后根据图片的clientHeight来确定在正方形中的位置，top,left值
JS能实现
------解决方案--------------------
处理图片在的上下左右居中，并且可以等比例缩放的，我上传的资源 有的。可以下载，不过可以给你个例子看看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.div1{
/*非IE内核*/
display:table-cell;
vertical-align:middle;
/*IE内核*/
*display:block;
*font-size:175px;/*高度为200PX， 则200*0.873约为175px*/
text-align:center;
width:200px;
height:200px;
}
.div1 img{ vertical-align:middle;/*之前的是图片上下左右居中。后面的是处理等比例缩放的*/ max-width:200px; width:expression(this.width > 200 ? "200px" : this.width); max-height:200px; height:expression(this.height > 200 ? "200px" : this.height);}
</style>
</head>
<body>
<div class="div1">
<img src="图片上下左右居中.jpg" /></div>
</div>
</body>
</html>
想了半天还是没解决，只能上论坛求助了。
要求如下：
一个长宽固定的图片容器（就假如是个100px x 100px的div吧，overflow:hidden)
里面有个<img> tag，图片源尺寸不一定，有大有小。
如果图片源尺寸为高200，宽150，那么应把高度裁剪50个像素（头部25像素，尾部25像素）然后等比缩放到100 x 100
如果图片源尺寸为高150，宽200，那么应把宽度裁剪50个像素（左边25像素，右边25像素）然后等比缩放到100 x 100
现在问题就是我知道单独指定一个宽度或高度，留下另一个属性不指定，可以让缩放的图片保持比例，但横向过长的图片或高度过高的图片总有一种会不满足条件
如果把图像设置成max-height:100px; max-width:100px虽然可以保持比例，但非正方形图片填不满100x100的容器。
不知道在不借助后台程序或javascript判断的情况下，如何用css满足我的要求？
------解决方案--------------------
如果图片源尺寸为高200，宽150，那么应把高度裁剪50个像素（头部25像素，尾部25像素）然后等比缩放到100 x 100
如果图片源尺寸为高150，宽200，那么应把宽度裁剪50个像素（左边25像素，右边25像素）然后等比缩放到100 x 100
这样子是不是图片不怎么和谐了
效果是可以做的 图片外面套个正方形DIV，overflow:hidden，然后根据图片的clientHeight来确定在正方形中的位置，top,left值
JS能实现
------解决方案--------------------
处理图片在的上下左右居中，并且可以等比例缩放的，我上传的资源 有的。可以下载，不过可以给你个例子看看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.div1{
/*非IE内核*/
display:table-cell;
vertical-align:middle;
/*IE内核*/
*display:block;
*font-size:175px;/*高度为200PX， 则200*0.873约为175px*/
text-align:center;
width:200px;
height:200px;
}
.div1 img{ vertical-align:middle;/*之前的是图片上下左右居中。后面的是处理等比例缩放的*/ max-width:200px; width:expression(this.width > 200 ? "200px" : this.width); max-height:200px; height:expression(this.height > 200 ? "200px" : this.height);}
</style>
</head>
<body>
<div class="div1">
<img src="图片上下左右居中.jpg" /></div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
