css如何实现不变形溢出屏幕

html-css09

css如何实现不变形溢出屏幕,第1张

如果是个背景图的话，

定义一个div,高100%,宽100%，里面放个img

<div class='bg'>

<img src="images/bg.jpg" alt="">

</div>

html,body{overflow: hidden}

.bg{width: 100%height: 100%top:0z-index: -1position: absolute}

.bg img{display: blockoutline: noneborder:0height: 100%width: 100%}

父容器css：text-align:center图片的css：margin-left:automargin-right:autooverflow:hidden更好的方法是写成背景，这样水平垂直都居中，且不会溢出：在父容器css里写： background:url(xxx.jpg) no-repeat center center

<p>在CSS代码中加入 word-wrap:break-word 实现自动换行</p>

<div style="width:100pxbackground:#ff0">

无自动换行AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

</div>

<p></p>

<div style="width:100pxbackground:#0f0word-wrap:break-word">

自动换行BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

</div>

<p>在CSS代码中加入 overflow:hidden 隐藏溢出部分</p>

<div style="width:100pxbackground:#ff0">

外DIV

 <div style="width:200pxbackground:#0f0">

 内DIV溢出

 </div>

外DIV

</div>

<p></p>

<div style="width:100pxbackground:#ff0overflow:hidden">

外DIV

 <div style="width:200pxbackground:#0f0">

 内DIV隐藏溢出

 </div>

外DIV

</div>