Question

html DIV 中插入图片的3个深度问题, 求懂真正原理的高手解答

1 一个大DIV下面有很多子DIV, 各个子DIV里有图片, 现在每个图片要单独加属性width height来指定宽,高, 能不能在总DIV中 统一加一个属性来控制下面所有图片的大小? 不能使用js和 css .

2, 图片源文件是1000*1000像素, 插入到DIV里用width height指定为200*200,那么网页加载的时候是怎么处理的? 是先下载1000像素的原图到本地 然后压缩成200显示出来吗? 压缩是用的什么算法?谁压缩?
还是在服务器上就压缩了然后下载200像素的图片? 我要知道这里 对加载速度的影响.

3, 图片用width :200, height:200指定大小后, 如果是长方形的图片, 它会强制变成这个高宽1:1的正方形, 如何保持等比例缩放, 只 将最长边变成200,?

Answer 1

问题1:不用js或是css是不可能的,div下的元素很多,图片只是其中一种,如果不用筛选器怎么能设置相应的内容.

问题2:读取的尺寸和显示的尺寸没关系,你可以把大尺寸的图片显示成一个点,也可以拉伸一个小图片,不是压缩,是浏览器解释之后,用插值方式显示的

问题3:无论长宽多少都会按照你设定的大小显示的

<img src="
https://www.baidu.com/img/bdlogo.png
" width="100px" height="100px" />

                           

                            <img src="
https://www.baidu.com/img/bdlogo.png
" width="10px" height="10px" />

                                <img src="
https://www.baidu.com/img/bdlogo.png
" width="100%" height="100%" />

同样的图片 尺寸不同的话

那个小点点也是一个图