解决这个问题的方法如下:
1、先在html里添加一个img图片标签。
2、运行页面后,这是完整显示图片大小的。图片大概是400x260左右的大小。
3、要进入图片缩放,可以在css样式里设置图片的宽度和高度,但不要宽和高都设置了,比如这里都设置为100px。
4、设置后,看下页面可以看到图片现在变形了。
5、正确的方法应该是只设置其中一个,比如设置宽度为100px,高度设置为自动就行了。
6、这里设置后的效果,图片并没有变形。
7、同样,如果是限定高度的大小,就设置宽度为自动,图片同样不会变形,这样问题就解决了。
设置对应图片的width和htight的具体数值就可以了。举例一个:
这样设置图片的话,可以使图片在指定的空间内缩放。
举例:
<div style="width:50px;height:40px">根据上面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
可以的:
页面上:<div class="div"><img src="..."></div>
下面的是CSS:
.div{总之,我使用的是百分比。