CSS如何实现图片等比例缩放不变形（代码实例）

朱雀 2021-01-29 18:06 733阅读 0赞

在工作中经常需要对图片进行缩放，但有些缩放会让图片变形，所以今天就给大家介绍**CSS如何实现图片等比例缩放不变形，**正在学习CSS的小伙伴赶紧过来看看吧！

下面一段代码给大家介绍CSS实现图片等比例缩小不变形 ，具体代码如下所示：
````
<img src="../images/bg1.jpg"alt=""/>

img {

/*等宽缩小不变形*/

/*width: 100%;*/

/*二选一*/

/*等高缩小不变形*/

height: 100%;

}
````
补充：CSS控制图片大小不变形

方法一、(不错，我正在用)
````
img {max-width:630px;myimg:expression_r(οnlοad=function(){this.style.width=(this.offsetWidth 630)?"630px":"auto"});}
````
设置最大宽度是630px 如果大于630就把图片宽度设置为630 高度就会随着比例也会缩小 不会造成图片变形

方法二
````
img,a img{

border:0;

margin:0;

padding:0;

max-width:590px;

width:e-xpression(this.width>590?"590px":this.width);

max-height:590px;

height:e-xpression(this.height>590?"590px":this.height);

}
````
方法三
````
div img {

max-width:600px;

width:600px;

width:expression(document.body.clientWidth>600?”600px”:”auto”);

overflow:hidden;

}
````
max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。

width:600px; 在所有浏览器中图片的大小为600px;

当图片大小大于600px，自动缩小为600px。在IE6中有效。

overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。

## 如果想设定图片的高度和宽度都不超过某一个固定值，就需要在图片高度或宽度超过这个值的时候，让图片按比例缩小到这个尺寸。 ##

（1）对于现代浏览器，比如Firefox或是IE7及以上，直接使用max-width和max-height两条CSS属性即可。

（2）对于IE 6.0及以下版本，以上两条CSS属性均不会被理会。之前处理这种事情，我们往往会借助Javascript，然后为图片加上onload事件。例如：
````
<imgsrc="..."alt="..."οnlοad="resizeImage(this)"/>

<script type="text/javascript">

functionresizeImage(obj){

obj.width=obj.width>50&&obj.width>obj.height?50:auto;

obj.height=obj.height>50?50:auto;

}

</script>
````
总结：以上所述是小编给大家介绍的CSS实现图片等比例缩小不变形的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我的支持！

发表评论取消回复

表情：

评论列表（有 0 条评论，733人围观）

还没有评论，来说两句吧...

相关阅读

相关等比例缩放多个图片

最新做了一个等比例缩放多个图片，保证所有图片宽高相等并不失真的功能，现将代码粘贴出来。 import javax.imageio.ImageIO; impor

淩亂°似流年/ 2023年10月10日 18:40/ 0 赞/ 74 阅读

相关图片等比例自适应缩放

图片的父级元素宽度写成百分比形式，图片的宽高取100%即可 <li class="desktops_item"> <img clas

忘是亡心i/ 2023年01月08日 12:26/ 0 赞/ 307 阅读

相关 php等比例缩放图片

/ 处理图片尺寸【等比例缩小或放大】 @param $filePath【进行处理图片本地地址】 @param $saveImage【处理后保存地址】 @para

秒速五厘米/ 2022年11月26日 15:52/ 0 赞/ 242 阅读

相关工具方法（一）- java等比例缩放图片大小（完美实现）

序业务需求：对大于200kb的图片进行等比例缩放到100kb以内实现注：等比例缩放图片大小方法在第（3）步 (1) 业务方法实现 //对

左手的ㄟ右手/ 2022年11月16日 13:41/ 0 赞/ 225 阅读

相关 CSS变形平移旋转缩放

CSS变形平移的特点：变形不会影响页面的布局，即只会影响元素自己，而不影响其他元素。使用transform来设置元素的变形效果平移： tr

Bertha 。/ 2022年09月04日 09:53/ 0 赞/ 304 阅读

相关 CSS控制图片等比例缩放

图片最大宽度为1000px 超过1000px自动等比例缩放至1000px .imgs { max-width: 1000px;//非I

你的名字/ 2022年07月12日 01:15/ 0 赞/ 260 阅读

相关 div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧（转）

本人对前端处理不是很牛，所以转载这文章。原文地址：http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列

Bertha 。/ 2022年06月15日 09:45/ 0 赞/ 403 阅读

相关 CSS控制图片等比例缩放

img{ width: auto; height: auto; max-width: 100%;

亦凉/ 2022年05月21日 01:54/ 0 赞/ 304 阅读

相关全屏图片等比例缩放

/ 大图自动等比例缩放。 / var bxsliderImgs = $(".bxslider").add(".b

Bertha 。/ 2022年01月16日 10:37/ 0 赞/ 356 阅读

相关 CSS如何实现图片等比例缩放不变形（代码实例）

工作中经常需要对图片进行缩放，但有些缩放会让图片变形，所以今天就给大家介绍**CSS如何实现图片等比例缩放不变形，**正在学习CSS的小伙伴赶紧过来看看吧！ [...

朱雀/ 2021年01月29日 18:06/ 0 赞/ 734 阅读