如何让div自动适应自身的img高度

Posted 2023-04-23

参考技术A

1、通过width:50%;height:auto;实现图片高度跟随宽度比例调整。

2、但是这个百分比是根据父级的高度来计算的，根本不是根据元素自身的宽度，那么就做不到Div的宽高达成一定的比例。

3、直接指定div的宽高+zoom来实现自适应divwidth:50px;heigth:50px;zoom:1.1;这样能达到初步的等宽高div。

4、通过js动态判断div的宽度来设置高度divwidth:50%;window.onresize = function()div.height(div.width);也能实现等宽高div，但是总觉得有点别扭。

5、通过宽高单位来设置divwidth:20vw;height:20vw;/*20vw为viewport width的20%*/。

6、能够让父级元素aa根据子元素的高度自动改变高度。

css+div布局，左右两个div怎么能自动适应高度

用div+css布局时，我想做一个左右结构的，怎么写能让左边div的高度和右边div的高度自动调整为成为相同的高度吗？
<div>左边</div><div>右</div>
<div style="float:left">左</div><div>右</div>左右结构的高度自适应

可以通过js实现两个div自适应同等高度，如下：
先设置div+css 基本布局：
<div id="mm">
<div id="mm1">左边</div>
<div id="mm2">右边</div>
</div>
js 实现 div 自适应高度
代码如下：
<script type="text/javascript">
<!--
window.onload=window.onresize=funct
if document.getElementByIdx_x "mm2" .clientHeight<document.getElementByIdx_x "mm1" .clientHeight
document.getElementByIdx_x "mm2" .style.height=document.getElementByIdx_x "mm1" .offsetHeight+"px";

else
document.getElementByIdx_x "mm1" .style.height=document.getElementByIdx_x "mm2" .offsetHeight+"px";


-->
</script> 参考技术A 用程序解决很容易,高度用一个变量就行,左边多少右边就多少,至于用什么程序就看网站是用什么程序的了,用Javascript脚本程序应该能实现. 参考技术B 外面再套一层div，内层div高度100%。要不就考虑用js实现 参考技术C 我试过的，基本上时做不了的状态，用JS是可以实现，但是这样会影响那些关了JS的用户的体验。父层自适应子层还是可以实现的，两个等高的话，确实是。。。
建议你还是想别的方法来达成相同的效果吧。（我就是这么做的。。。曾经我试过把设置height属性，先把body的height属性设为100%，再设置其他的height,后来发现height:100%;只是固定的屏幕高度，而不是你的文档的高度）
（三楼那个显然不行嘛。。。你clear一下，也只是不让后面的元素受浮动影响罢了...)本回答被提问者采纳 参考技术D <div style="width:50%;float:left;height:200px;">左边</div><div style="width:50%;float:left;height:200px;">>右</div>
按你的要求的话,只能用表格了~~要么用JS,或是修改布局.