css怎么设置最大高度和最小高度

html-css0178

css怎么设置最大高度和最小高度,第1张

布局过的人都知道CSS的最小高度min-height是个很有用的属性，它可以让很短的内容也有一个很合适的高度，使页面显得美观。但很可惜IE6不支持这一属性。怎么办呢？我们可以用另外一种方法让IE6也有最小高度min-height属性的效果。众所周知，如果内容超过元素的高度，那么IE6是会自动增加元素的高度，即使你明确的定义了元素的高度。我们可以利用IE6的这个bug来让IE6也有最小高度min-height属性的效果。具体代码如下：height:auto !importantheight:500px解释：1、由于IE6对!important的解释存在bug，所以它只识别height:500px这一句，超过500px后，IE6自身会增加盒子的高度；2、IE7和其他标准浏览器三句都能识别，虽然定义height:500px，但我们又有了height:auto !important，所以超过500px也能自动增加盒子的高度。三句代码让IE6也有了最小高度min-height的效果，简单又实用，不错吧。

你就上一段css和效果图，谁知道你的TOP_06.jpg是哪个？TOP_04.JPG是哪个？

不过，我可以给个建议：

min-width:最小宽度

max-width:最大宽度

在menu 中加样式看看:

#menu

{

min-width:500px

width:auto

max-width:960px

margin:0px auto

}

把图片设为父级元素的背景图片是最简单的方法：

<div style="width:400px height:300px background:url(123.jpg) no-repeat center / cover"></div>

如果一定要以单独的图片展示，则这样：

<div style="position:relative width:400px height:300px overflow:hidden">

    <img src="123.jpg" style="position:absolute left:50% top:50% transform:translate(-50%,-50%) min-width:100% min-height:100% " />

</div>

<!--以上适用于图片的长和宽至少有一个是小于div外框的情况-->

<!--如果图片的长和宽都大于div外框，则必须结合js才行-->

<div style="position:relative width:400px height:300px overflow:hidden">

    <img src="123.jpg" style="position:absolute left:50% top:50% min-width:100% min-height:100% transform:translate(-50%,-50%)" onload="if(this.width>400&&this.height>300){if(this.width/this.height<400/300){this.style.maxWidth='100%'}else{this.style.maxHeight='100%'}}" />

</div>