2024年网页制作中图片太大 篇1
利用这个属性:background-size
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。
语法:
background-size: auto | <长度值> | <百分比> | cover | contain
取值说明:
1、auto:默认值,不改变背景图片的原始高度和宽度;
2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;
3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;
4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
提示:大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。
示例代码:
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>背景图片大小</title><style type="text/css">.demo { background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; width: 300px; height: 140px; border: 1px solid #999; background-size:cover;}</style> </head> <body><div></div></body></html>
2024年网页制作中图片太大 篇2
照片大小的概念分为2种:一种是照片分辨率的高低,也就是照片像素的高低,通常以长边像素×短边像素表示;另一种就是照片文件的大小,通常以MB表示,这与其它非照片类文件的表示方法一致。
一般来说,各网站要求的照片大小是不同的,对上传照片大小的限制方法也不同。有的网站只限制以上两种之一(以限制文件大小为多数),而有些网站则两种都会限制,也就是说,既限制分辨率不能超过某个标准,又限制文件大小不能超过多少MB,甚至是KB级别。
回到问题上来,这时若既要满足网站要求,又得上传相对画质好的照片文件,就按这个方法做:依据网站要求的最大分辨率把照片裁剪一下。如果该网站不要求文件大小,那就可以上传了。如网站同时限制文件大小,且剪裁后的照片还太大,那只有继续缩小分辨率,直到文件大小满足限制。但这里有个窍门:继续剪裁时,先看一下文件大小超过规定有多少。超得不多,那就少裁点分辨率;反之,就略多裁点。假使网站只限制文件大小,不限制分辨率,那自由度比较大,只要比较原始文件与规定大小相差多少,估计出需要剪裁的量就行了。
对于限制文件大小的网站,在剪裁照片分辨率时,要注意剪裁后的文件要略小于规定的大小,我就碰到过正好大小时,照片也被拒传的情况。
总之一句话,在满足网站要求的情况下,尽量把照片保留大一点的分辨率,使其显示效果最佳。