img高度固定,宽度自适应,img自适应div大小 铺满且不变形

　　这种方法主要用于适配网站，同时可以托起内容高度，避免图片加载导致的页面滚动。

　　一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。

　　js的一个缺点是只有在页面刷新的时候才能调整图片的高度，不能和浏览器的窗口大小自适应。

　　二、我这次主要是用css来实现图片高度的自适应问题。

　　下面是所需的代码。

　　(这种方法可以在图片顶部垂直居中显示文字。如果不需要，可以选择底部更简洁的代码。)

　　Class= box span行中的元素垂直居中/span div class= img-box img src= 123 . jpg //div/div . box { width:50%；边距：50px自动；}.img-box{宽度：100%；位置：相对；z指数：1；}.img-box img { position:absolute；top:0；底部：0；左：0；右：0；宽度：100%；边距：自动；z索引：-1；*缩放：1；}.img-box:在{ content:“”之前；显示：内嵌-块；底部填充：100%；宽度：0.1px/*必须有数值，否则撑不住height */vertical-align:middle；}1.这里主要解释属性padding-bottom。当其值为百分比时，根据元素的宽度进行计算。所以当它设置为100%时，它的高度等于它自身的宽度，形成一个正方形。当然，这个值可以根据实际情况进行调整。

　　2.其次要说明的是，我们引用的图片是绝对定位布局的，这样图片才能适应其父元素的大小变化。

　　另一种简洁的方法是将padding-bottom直接添加到img的父元素中。

　　div class= img-box img src= 123 . jpg //div . img-box { padding-bottom:100%；}.img-box img { position:absolute；top:0；底部：0；左：0；右：0；宽度：100%；边距：自动；}以上是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。