css after 插入图片,怎么设置内容高度

html-css06

css after 插入图片,怎么设置内容高度,第1张

1.我们首先创建一个新的测试项目,然后创建一个新的index.html、basic.js和basic.css文件。

2.js修改文件中的样式中值div以修改div高度。文件中的文件代码如图所示。

3.我们看到3运行后两个div的高度是一样的..然后我们用js修改高度。

4.我们点击js中的代码,使用属性对应的样式属性获取div1id,然后设置高度如图所示。

5.使用js修改CSS文件中的div的height的值HTML文件中的代码。

6.我们得到js文件中的div1id属性,并使用obj.style.cssTest修改嵌入的css。

7.运行项目后,两个结果是相同的div高度改变。

1. 在编写网页时,如果图片大小事先是未知的,如果图片过大的话,会影响的网页中其他块的结构

使用css可以将图片的大小调整到一个固定的值

<span style="font-size: 16px">#mian img{

max-width:170px

width:170px

width:expression(document.body.clientWidth>170?"170px":"auto")

max-height:180px

height:180px

height:expression(document.body.clientWidth>180?"180px":"auto")

overflow:hidden

}

</span>

2.html代码中

如果图片的大小是事先未知的,这样设置可以使,图像的大小固定,从而不影响网页中其他块的结构

<span style="font-size: 16px"><div id = "maim">

<!--

在mian样式的块中img标签图片的大小会被固定在170px*180px

-->

<img src="01.jpg">

</div>

</span>

设置图片自适应,给图片设置display:blockwidth:100%不要设置高度,不要设置高度,不要设置高度。这样图片就能根据父级div适应大小,就是你设置一个div,里面放图片。div多大,图片就多大。高度自动适应,所以不能设置高度。