css样式修改图片大小,css样式修改图片大小怎么改

css中的背景图怎么改变大小

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的style标签中，输入css代码：body{background: url(image.jpg) no-repeat;background-size: 200px 200px; }。

3、浏览器运行index.html页面，此时背景图片成功被设定为200*200。

相关问答

Q1: 如何利用JS或者CSS样式来自动调整图片大小

js版和css版自动按比例调整图片大小方法，分别如下：

titlejavascript图片大小处理函数/title

script language=Javascript

var proMaxHeight = 150;

var proMaxWidth = 110;

function proDownImage(ImgD){

      var image=new Image();

      image.src=ImgD.src;

      if(image.width0  image.height0){

      var rate = (proMaxWidth/image.width  proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;

    if(rate = 1){   

     ImgD.width = image.width*rate;

     ImgD.height =image.height*rate;

    }

    else {

                          ImgD.width = image.width;

                          ImgD.height =image.height;

                  }

      }

}

/script

/head

body

img src="999.jpg" border=0 width="150" height="110"  onload=proDownImage(this);   /

img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this);   /

/body

纯css的防止图片撑破页面的代码，图片会自动按比例缩小：

style type="text/css"

.content-width {MARGIN: auto;WIDTH: 600px;}

.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width  600 ? "600px" : this.width)!important;}

/style

div class="content-width"

  pimg src="/down/js/images/12567247980.jpg"//p

  pimg src="/down/js/images/12567247981.jpg"//p

/div

Q2: css 可以按比例缩放图片吗？

解决这个问题的方法如下：

1、先在html里添加一个img图片标签。

2、运行页面后，这是完整显示图片大小的。图片大概是400x260左右的大小。

3、要进入图片缩放，可以在css样式里设置图片的宽度和高度，但不要宽和高都设置了，比如这里都设置为100px。

4、设置后，看下页面可以看到图片现在变形了。

5、正确的方法应该是只设置其中一个，比如设置宽度为100px，高度设置为自动就行了。

6、这里设置后的效果，图片并没有变形。

7、同样，如果是限定高度的大小，就设置宽度为自动，图片同样不会变形，这样问题就解决了。

Q3: 关于如何利用CSS自动调整图片的大小

1、首先需要新建一个HTML页面。

2、然后输入页面的标题，可以按照下方图中的进行设置。

3、然后在根据下方图片中的代码进行编辑，

4、在两个div的class 中添加相同的控制图片的class名为了 ”img“，并为div添加控制宽度的样式。

5、在两个div中加入相同的图片img src="images/5.png" /，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了。

6、然后在输入命令.img img{ width:100%; height:auto}，这样就完成了。

Q4: css中图片大小怎么设置

方法一：通过 style="width:180px;height:100px"

img src="" style="width:180px;height:100px"/

方法二：通过调用样式

style type="text/css"

.srcImg{width:180px;height:100px;}

/style

img src="" class="srcImg"/

Q5: css中如何调整插入背景图片的大小

可以通过cover和contain来对图片进行伸缩。

语法：

background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */

background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */

background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */

background-size:cover;/* 将背景图片等比缩放填满整个容器 */

background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

扩展资料：

CSS背景图片自适应、全屏、填充、拉伸

方法一：js控制

div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1"  

img src="pictures/background.jpg" height="100%" width="100%"/

/div

div id="formbackground" style="position:absolute; z-index:-1;"img src="10.jpg" height="100%" width="100%"//div

script type="text/javascript"

$(function(){

$('#formbackground').height($(window).height());

$('#formbackground').width($(window).width());

});

/script

方法二：全浏览器兼容

.bg{

background:url();

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}