如果在页面使用时,需要动态改变元素的高度,可以使用JS代码来重新改变这个元素的高度。比如
<div id="box" style="width:500pxheight:100pxborder:1px solid #ccc">内容</div>
<script>
//原来的div元素设置的高度是100px下面的JS可以改变其高度为300px
document.getElementById("box").style.height="300px"
</script>
//给你一个比较灵活的,可自由控制jQuery(window).load(function () {
jQuery(".div1 img").each(function () {//div1下的img宽度、高度设置
DrawImage(this, 700, 470)//宽700,高470,自己改为相同即可。
})
})
function DrawImage(ImgD, FitWidth, FitHeight) {//下面是判断,可自己修改条件
var image = new Image()
image.src = ImgD.src
if (image.width > 0 && image.height > 0) {
if (image.width / image.height >= FitWidth / FitHeight) {
if (image.width > FitWidth) {
ImgD.width = FitWidth
ImgD.height = (image.height * FitWidth) / image.width
}else {
ImgD.width = image.width
ImgD.height = image.height
}
} else {
if (image.height > FitHeight) {
ImgD.height = FitHeight
ImgD.width = (image.width * FitHeight) / image.height
} else {
ImgD.width = image.width
ImgD.height = image.height
}
}
}
}
控制图片最大宽度和高高度,在css里面有max-width、max-height的属性,非要用js也不是不可以的,document.getElementById('id').style.maxWidth。这个属性ie6支持的不好。但是现在也不用兼容ie6了吧。如果你想宽图用最大宽度,竖图用最大高度的好,那你就加一个判断的语句再决定是max-width、还是max-height.