css 可以按比例缩放图片吗?
发布网友
发布时间：2022-04-23 02:43
共8个回答
热心网友
时间：2022-04-06 12:07
解决这个问题的方法如下：
1、先在html里添加一个img图片标签。
2、运行页面后，这是完整显示图片大小的。图片大概是400x260左右的大小。
3、要进入图片缩放，可以在css样式里设置图片的宽度和高度，但不要宽和高都设置了，比如这里都设置为100px。
4、设置后，看下页面可以看到图片现在变形了。
5、正确的方法应该是只设置其中一个，比如设置宽度为100px，高度设置为自动就行了。
6、这里设置后的效果，图片并没有变形。
7、同样，如果是限定高度的大小，就设置宽度为自动，图片同样不会变形，这样问题就解决了。
热心网友
时间：2022-04-06 13:25
<div>
<img src="1.jpg" alt=""></div>123
备注一下这里的图片大小为200x200px
div { width: 400px; height: 400px; border: 1px solid #000; }img { width: 100%; height: 100%;}123456789
不管容器有多大，只要将img的宽高设置成100%（这里的100%是相对于父级宽高而言）就能自适应容器大小。
那是不是就这这么简单完事儿了呢？如果你不介意图片被放大后可能出现失真的话也的确是这样就ok了。
假如你介意 图片放大后会失真，我们可以改进上面的代码，只需要将img的样式简单修改
img { max-width: 100%; max-height: 100%;}1234
max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽，在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的，所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小，更通俗的讲就是只允许缩小不允许放大img。
具体情况中是选择width:100%还是max-width:100%还是依据个人的需求而定，另外在响应式设计中这个问题稍微会复杂一点。
响应式
响应式设计中：如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片， 宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。
这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。
我觉得响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。
最后，假如你的img是作为background使用的就需要通过background-size: cover/contain又或者是具体的百分比去设置图片在容器中所占比例的大小。这里就不详细介绍了，有兴趣可以到w3school里了解下。
热心网友
时间：2022-04-06 15:00
设置对应图片的width和htight的具体数值就可以了。举例一个：
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
这样设置图片的话，可以使图片在指定的空间内缩放。
举例：
<div style="width:50px;height:40px"><img src="a.jpg">
<!--这里我们假如图片的实际尺寸是320X320-->
</div>
根据上面4个css可以知道：
图片被缩放后在div的尺寸是：
width:50px;（因为图片的width:100%）
height:50px（这里height是在width:100%被缩放后的尺寸。）
我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height
这个时候，max-height:100%;就会发挥作用，
在max-height:100%;的作用下，图片被缩放后在div的尺寸是：
width:40px;
height:40px;
这个尺寸符合max-height和max-width
热心网友
时间：2022-04-06 16:51
用样式表固定图片的长 或者 宽，另一边会自动等比缩放。
img { width:100;} 或者 img { height:100px;}
热心网友
时间：2022-04-06 18:59
可以的：
页面上:<div class="div"><img src="..."></div>
下面的是CSS：
.div{width:100px;
height:100px;
}
.div img{
width:100%;
height:100%;
}
总之，我使用的是百分比。
热心网友
时间：2022-04-07 00:05
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
标准声明
热心网友
时间：2022-04-07 03:03
热心网友
时间：2022-04-07 06:18
