缩放css样式,css图片比例缩放

css让图片按最大长或宽等比例缩放

有几个方法，各有优劣 你自己斟酌，部分也说不细需要你自己百度具体做法：

定死宽高中的一个，另一个未定死的数值就会按比例来，如果多了overflow切掉，好处是容易操作，兼容性好，坏处很多，图片内容不能全部展示、可能切掉希望展示的内容只适用于很少情况。

设为背景图使用css3的background-size配合background-position来解决，contain和cover两个值效果不错，基本能解决你想要的所有效果，缺点是不兼容低版本浏览器、需要通过内联css样式解决、不是img标签浏览器搜索引擎不友好、不符合HTML语义化标准。

使用css3的flex定位，网上有具体的操作，一时说不明白都是用得到的时候自己去搜。好处是完全语义化符合标准，基本能解决你的问题，缺点是，学习成本高，兼容性稍差，有些手机上表现有问题。

js方案，都js了自己写就是了。缺点是需要用js，写不好会有bug，相对麻烦一些，加载时候页面可能会有抖动。

服务器方案，客户上传的图片到服务器走一圈，做成自己希望的大小，而且有一个服务器插件不仅可以截取到目的大小而且还能针对图片内容截取（例如尽可能保留人物面部、智能判断页面重点），这个试过效果很不错，不过具体哪个插件不记得了，估计搜也能搜到。优点是比较智能自己设置好了几乎完美，几乎不再需要麻烦的css，页面也相对比较规整，缺点是需要服务器端支持。

如果可以比拘泥于容器，让容器兼容图片，网上有很多的gallery插件，类似谷歌图片，摆布也不错，优点是不用考录图片和div的问题了，缺点是需要从新设计及相关技术....

相关问答

Q1: div和css制作的网页如何实现缩放

1、这种情况必须使用百分比才能保证同比缩放，不然窗口缩小不固定，固定像素做不到同时缩小；

2、在浏览器里按F12，找到样式表，修改样式表中样式实现缩放；

Q2: 如何css控制字体按百分比放大缩小

由于字体是“有级缩放”（就像风扇的档位调节开关，只能调1档、2档、3档这些，不能1.5档，或者2.1111档等），不是“无级缩放”（就像音响上的音量旋钮，可以调到任意的位置），因此要想真正实现按百分比来缩放是不太现实的。一个变通的方法是利用css3的新长度单位rem（根元素的字体大小），其默认值是16px，那么1.5rem就是16*1.5=24px，0.75rem就是16*0.75=12px。比如

font-size:1.5rem

Q3: 如何在HTML中用CSS对图片进行缩放

可以用css3中“transform: scale()”属性对图片进行缩放。

1、新建html文档，在body标签中添加一张图片，给这张图片设置css属性，添加“tansform”缩放属性，属性值为“scaleX(n)”，scaleX(n)指的是对宽度进行缩放，n指的是缩放比例：

2、将transform的属性值改为“scaleY(n)”，scaleY(n)指的是对高度进行缩放，n指的是缩放比例：

3、将transform的属性值改为“scale(n)”，scale(n)指的是对图片的宽度和高度同时进行等比例缩放，n指的是缩放比例：

Q4: div+css怎么让背景图片自动缩放

.imgDiv{

width:500px;

height:500px;

background-image:url('../images/index.jpg');

-moz-background-size: 100% 100%;

-o-background-size: 100% 100%;

-webkit-background-size: 100% 100%;

background-size: 100% 100%;

-moz-border-image: url(./btn.png) 0;

background-repeat:no-repeat\9;

background-image:none\9;

（此处空一行）

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index.jpg', sizingMethod='scale')\9;

} 

扩展资料：

css控制背景图片自动伸缩自适应的小技巧

例子如下：

.picLUp{  

background:url(logo.png) no-repeat;  

width:100%;height:40%;  

background-size:100% 100%;  

}  

语法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

属性：

enabled:　

可选项，布尔值(Boolean)，设置或检索滤镜是否激活。true | false

true:　

默认值，滤镜激活。

false:　

滤镜被禁止。

sizingMethod:　

可选项，字符串(String)，设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

Q5: CSS强制图片大小 CSS图片大小如何自动缩放

需要准备的材料分别有：电脑、chrome浏览器、html编辑器。

1、首先，打开html编辑器，新建一个html文件，例如：index.html。

2、其次，在index.html中的style标签中，输入css样式代码：body {background: url(image7.jpg) no-repeat;background-size: 250px;}。

3、最后，浏览器运行index.html页面，此时用CSS强制了图片占用250px宽度的大小并且是等比例自动缩放。

[img]