全教育培训行业第三方平台平台就业机构
扫码试听
扫码试听
Q:2638333071
首页 > 行业动态 > > CSS中如何控制图片大小的方法介绍(css设置图片宽高)
行业动态 行业问答 课程问答 零基础学习 就业前景 技术干货

CSS中如何控制图片大小的方法介绍(css设置图片宽高)

发布时间:3 个 月 前 栏目:行业动态 浏览:

1、CSS中如何控制图片大小的方法介绍


一、网页制作技巧实例解决:用CSS控制图片自适应大小

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?

我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。我们看下面的代码:

p 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; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。

二、有时候图片太大,会破环网页整齐的布局。这时可以用css来强制按比例压缩图片的高度或宽度

css代码如下:

img,a img{
border:0;
margin:0;
padding:0;
max-width:590px;
width:expression(this.width>590?"590px":this.width);
max-height:590px;
height:expression(this.height>590?"590px":this.height);
}这样当图片的高度或宽度若超过590px,将会按比例压缩成590px,如果不超过则按原大小显示。

CSS中如何控制图片大小的方法介绍

2、怎样用CSS使图片高度自动缩放比例


我们知道,在瀑布流这类的图片列表布局中常常可以看到用CSS控制DIV里的图片宽度高度,其实这样的布局很简单,今天就给大家详细讲解一下。

当遇到这样的DIV CSS布局时候,其实非常简单,我们只需要对图片宽度进行控制,而图片高度不用设置即图片高度会自动适应缩放比例(不设置高度即高度值默认为auto自适应)。

如上图,加入一个CSS命名为“.imgbox”的DIV盒子里图片宽度为252px,这个时候对应如何写CSS让对象里图片高度自动根据宽度缩放比例:

.imgbox img{width:252px}

就这样简单CSS选择器即可控制DIV盒子“.imgbox”里图片宽度,而没有设置CSS高度(height)样式,这样默认图片就会自适应宽度等比例缩放了。

小结:

对于新手来说,可能忘记了宽度、高度如果不设置默认是自适应这一特性,所以可能遇到设置图片宽度,就想一定要给予设置高度这样的固化思维。其实在CSS布局中图片宽度固定、高度自适应这种要求情况下,CSS只需设置宽度值,高度就不用添加设置即可达到想要布局效果。

在布局中如果图片高度和宽度都是固定不变的,无论图片多大什么比例,布局的图片宽度高度是固定的,这种情况下就需要同时对图片设置固定宽度和高度值。

相信看了这些解析你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

怎样让DIV自适应高度

在HTML里用CSS隐藏div的方法

详解前端响应式布局、响应式图片,与自制栅格系统

CSS中如何控制图片大小的方法介绍

3、css怎么设置图片大小css怎么设置图片大小位置

如何在css中设置图片的大小

选择器{

宽度:px;设置宽度

高度:px;设置高度

}

同一张图片保存为不同类型的文件哪一个容量最大?

图像的文件格式有很多种,在不同的图像文件格式中所保存的图像信息是不同的,每种图像处理软件均有各自兼容和不兼容的图像文件格式,因此应该根据图像的用途决定将图像保存为哪种格式。常见的图像文件格式主要有PSD格式、JPEG格式、PNG格式、GIF格式、BMP格式等。

1)PSD格式的图像文件是使用AdobePhotoshop软件生成的默认图像文件格式。用以保存图像的通道、图层和颜色模式等信息,以备以后进行再次修改,该格式的通用性差,只有在Photoshop中才能使用,很少有其他的软件支持该格式。

PSD格式的图像文件是唯一一个支持全部颜色模式的图像文件格式,由于PSD格式包含的信息较多,因此该格式保存的图像文件比较大。

2)JPEG格式是目前各种图像文件格式中压缩率最高的一种文件格式,普遍应用于图像显示和一些HTML文档中,JPEG格式支持CMYK、RGB和灰度等颜色模式,但是不支持Alpha通道。

在将图像保存为JPEG格式后,JPEG图像文件会保留RGB图像中所有的颜色信息,但是会有选择地扔掉数据来压缩文件的大小。这种压缩是有损的,损失的大小不等,有的小到人的眼睛分辨不出来,有的则会产生较大的差别。该格式常用于显示HTML文档中连续色调的图像,以及图片的预览。

标准的JPEG格式是有损的,也就是说每次进行JPEG格式转换,图像的品质都会下降,要想将品质损失降到最低,就不要对文件反复进行JPEG格式的转换,在平时操作中,可以先将文件以PSD或TIFF格式保存,在发送文件前再将文件复制后的副本转为紧凑的JPEG格式。

3)PNG格式是由Netscape公司开发的文件格式,可以用于网络图像,其优势是可以保存24位真彩色图像,并且具有支持透明背景和消除锯齿边缘的功能,还可以在不失真的情况下压缩并保存图像,但保存为PNG格式的文件也比较大。

4)GIF格式是一种LZW压缩格式,可以减小文件大小并缩短电子文档传输的时间,因此被广泛应用于网页文档中,它可以保留索引颜色图像中的透明度,但不支持Alpha通道,可以用于显示HTML文档中的索引颜色图形和图像,以及应用在其他的通讯领域。

5)BMP格式是DOS和Windows兼容计算机上的标准,Windows图像文件格式的图像可以从黑白(每像素1字节)到最高24位色,可以说BMP格式支持1——24位颜色深度,BMP格式还支持RGB、索引颜色、灰度和位图等颜色模式,但BMP不支持Alpha通道。

上一篇:没有了
技术干货
零基础学习
行业多年深耕,从这报名,学费立减800
  • 岳同学180****1241刚刚成功领取
  • 胡同学134****6431刚刚成功领取
  • 李同学150****6122刚刚成功领取
  • 张同学136****2231刚刚成功领取
  • 孙同学178****5521刚刚成功领取
  • 齐同学156****7788刚刚成功领取
猜你喜欢
查看更多
相关推荐
查看更多
现在学习,我的薪资能达到多少?
立即报名

联系我们:

Q:2638333071

鄂ICP备2023015464号