各位老铁们好，相信很多人对css图片大小怎么调整都不是特别的了解，因此呢，今天就来为大家分享下关于css图片大小怎么调整以及css改变字体大小和颜色的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！
一、如何用DIV+CSS控制图片大小范围
使用CSS max-width和max-height实现图片自动等比例缩小
很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度，这样图片就会等比例缩放图片，然图片相对不变形清晰。
使用max-width:300px或max-height:100px，即可解决图片比例缩小。但这样存在一个问题，如果按照宽度缩放，但图片过高会超出溢出盒子，这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height，IE6不支持，我们需要设置个width:expression(this.width> 300?"300px": this.width);或者height:expression(this.height>100?"100px":this.height);。
一般情况下只需要设置好宽度限制，比如这里只设置最大宽度为300px(max-width:300px),然后对父级使用overflow:hidden隐藏溢出图片，同时为了兼容IE6我们设置个width:expression(this.width> 300?"300px": this.width);解决即可。
1、具体解决DIV+CSS实例代码如下：
<title>图片缩小不变形实例 www.divcss5.com</title>
.divcss5{ border:1px solid#000; width:300px; height:100px;overflow:hidden}
.divcss5 img{max-width:300px;_width:expression(this.width> 300?"300px": this.width);}
二、css中的背景图怎么改变大小
1、1-把图片放在div的背景图里，再利用css3的background-size属性，语法：
2、background-size:length|percentage|cover|contain;
这个CSS3的属性作用是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中，如果不使用这个属性，在IE11和FireFox中缩放浏览器，背景图片会随之缩小，同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器；background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动，当设置为fixed时页面的其余部分滚动时，背景图像不会移动。
3、这个CSS3的属性作用是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中，如果不使用这个属性，在IE11和FireFox中缩放浏览器，背景图片会随之缩小，同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器；background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动，当设置为fixed时页面的其余部分滚动时，背景图像不会移动。
4、2-如果是有规律变化的图，可以将图片单独切出来，然后repeat-x或者repeat-y进行平铺，也是一个不错的方法，而且图片可以切得不用那么大，也对图片进行充分利用。
5、3-将图片写在img标签里，然后对图片和div进行相对定位/绝对定位，效果是图片尺寸不会随浏览器缩放而变化，但是如果有竖直滚动条时，图片不会固定而会随滚动条移动。只需要把图片的宽度width设置成100%就行了。
三、如何使用CSS调整图片大小的实例代码分享
通常，我们可以给图片<img>设置一个CSS属性，定义其高度和宽度。但有时候，我们只希望控制图片的最大可见大小。这样的操作，一般有两种办法：1.直接使用CSS属性值；2.使用JavaScript动态设置CSS值。
一般，为了限制图片的大小，会使用下面的HTML属性值或CSS属性值来定义：
<img src="http://www.linuxfly.org/logo.gif" width="600" height="500" border="0">
但这样的设置太死板，不够灵活。
width:expression(this.width> 500?"500px": this.width);
}这里定义了一个qtipImg类下面的img标签用CSS规则，通过max-width属性把图片控制在500px的宽度范围，并且是自适应比例的。
但是，各浏览器对该属性的支持并不一致，如IE6不支持该属性。
所以，后面又增加了一个expression的动作，该操作符后面括号中的语句是JavaScript脚本，用于动态的调整图片大小的。
而最后的，overflow:hidden则是为了防止上述两属性定义失效时，将超出设置大小的部分隐藏起来，避免显示异常。
该设定经测试，在IE7、IE8、FireFox 3.5下使用都很正常。
每个浏览器（包括版本不同）对CSS的支持都会有区别。例如：IE 8下就取消了对expression动作的支持。这时，利用JavaScript来调整图片大小也是一个不错的方法。但它的缺陷在于，使用纯JavaScript脚本，在图片下载期间，大小会溢出，直到下载完成，JavaScript才会把其大小调整到合适的值。
function getImageSize(FilePath){
var imgSize={width:0,height:0};
imgSize.height= image.height;
function fixImageSize(originalImage){
if( originalImage.width> fixSize){
originalImage.height= Math.round( originalImage.height* fixSize/ originalImage.width);
originalImage.width= fixSize;
使用时，把图片的地址传递给这两个函数，返回值即为调整后的图片：
img= getImageSize("http://www.linuxfly.org/logo.gif");
finalresult='<img src="'+attachUrl+'" width="'+img.width+'" height="'+img.height+'" alt="'+filename+'"/>';
虽然CSS的expression方式将会被取消，但直接使用JavaScript方式计算合适的CSS值还是一个不错的方法。例如jQuery的$(document).ready()方法可以避免加载图片时溢出的问题。
$('.post img').each(function(){
var maxWidth= 100;//图片最大宽度
var maxHeight= 100;//图片最大高度
var width=$(this).width();//图片实际宽度
var height=$(this).height();//图片实际高度
ratio= maxWidth/ width;//计算缩放比例
$(this).css("width", maxWidth);//设定实际显示宽度
height= height* ratio;//计算等比例缩放后的高度
$(this).css("height", height* ratio);//设定等比例缩放后的高度
ratio= maxHeight/ height;//计算缩放比例
$(this).css("height", maxHeight);//设定实际显示高度
width= width* ratio;//计算等比例缩放后的高度
$(this).css("width", width* ratio);//设定等比例缩放后的高度
四、css中如何调整插入背景图片的大小
可以通过cover和contain来对图片进行伸缩。
background-size:auto;/*默认值，不改变背景图片的高度和宽度*/
background-size:100px 50px;/*第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放*/
background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放*/
background-size:cover;/*将背景图片等比缩放填满整个容器*/
background-size:contain;/*将背景图片等比缩放至某一边紧贴容器边缘*/
CSS背景图片自适应、全屏、填充、拉伸
<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">
<img src="pictures/background.jpg" height="100%" width="100%"/>
<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>
<script type="text/javascript">
$('#formbackground').height($(window).height());
$('#formbackground').width($(window).width());
background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
五、关于如何利用CSS自动调整图片的大小
2、然后输入页面的标题，可以按照下方图中的进行设置。
3、然后在根据下方图片中的代码进行编辑，
4、在两个div的class中添加相同的控制图片的class名为了”img“，并为div添加控制宽度的样式。
5、在两个div中加入相同的图片<img src="images/5.png"/>，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了。
6、然后在输入命令.img img{ width:100%; height:auto}，这样就完成了。
好了，文章到此结束，希望可以帮助到大家。
