关于用CSS控制图片大小和比例的问题

owenxin26 2010-09-20 11:35:33

想了半天还是没解决，只能上论坛求助了。

要求如下：
一个长宽固定的图片容器（就假如是个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满足我的要求？

...全文

1383 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

天才在左疯子在右 2012-07-05

打赏
举报

四楼可否提供html完整的html代码

wudongguo 2012-05-24

打赏
举报

都说四楼的不错，我看一下

ygh588 2011-09-25

打赏
举报

正需要

yaoyonghai 2011-06-01

打赏
举报

4楼是猛人的啦

liu3062315 2010-11-15

打赏
举报

4楼是猛人的啦

去圣西罗-为尤文喝彩 2010-11-11

打赏
举报

4楼的方法就可以，用外套DIV隐藏照片不需要显示的部分。

miyacnn 2010-11-11

打赏
举报

处理图片在的上下左右居中，并且可以等比例缩放的，我上传的资源有的。可以下载，不过可以给你个例子看看
<!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>

ajccom 2010-11-10

打赏
举报

如果图片源尺寸为高200，宽150，那么应把高度裁剪50个像素（头部25像素，尾部25像素）然后等比缩放到100 x 100
如果图片源尺寸为高150，宽200，那么应把宽度裁剪50个像素（左边25像素，右边25像素）然后等比缩放到100 x 100

这样子是不是图片不怎么和谐了

效果是可以做的图片外面套个正方形DIV，overflow:hidden，然后根据图片的clientHeight来确定在正方形中的位置，top,left值
JS能实现