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

img是不固定高度的图片,是div内部的元素,

1、首先在编辑器建立了一个静态页面,在body中添加两个div,设置宽度,并设class 为div1和div2,在两个div的class 中添加相同的控制图片的class名为了 ”img“,并为div添加控制宽度的样式:

2、在两个div中加入相同的图片, 这个时候需要在img 类中加入css语句设置一下div的高度和宽度,以及div的边框,然后就可以设置img的样式了:

3、最后设置img的样式中图片的高度为auto,宽度为100%,这样就可以自适应浏览器了,来到浏览器,可以看到设置了自适应的图片自动填满整个div了,而没有设置的则是填充了一部分。以上就是让div自动适应自身的img高度:

温馨提示:内容为网友见解,仅供参考
第1个回答  2019-07-20

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

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

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

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

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

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

本回答被网友采纳
第2个回答  推荐于2017-11-28
首先要 给img 外部div 加一个float:left;的属性 让他变成块及元素 然后 再给img 一个float:left; 这样 div 就会随着内部的img 的高度 而变化。一般 网页做的时候 虽然不会规定img 的 高度 但会给img 一个最大宽度 所以 在css样式中 要给img 设置一个 宽度 注意不要设置高度! 设置宽度 而不设置高度 这样图片会自动给居宽度而自适应变高度 这样是不会出现 图片失真 和挤压问题。本回答被提问者采纳
第3个回答  2013-06-26
那div里不写height,width追问

但是图片超出div了,设置的border-bottom在图片中间穿过去了

追答

能把css弄出来看下?

第4个回答  2013-06-26
试试...
width:auto;height:auto;

如何让div自动适应自身的img高度
1、通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整。2、但是这个百分比是根据父级的高度来计算的,根本不是根据元素自身的宽度,那么就做不到Div的宽高达成一定的比例。3、直接指定div的宽高+zoom来实现自适应div{width:50px;heigth:50px;zoom:1.1;}这样能达到初步的等宽高div。4、通...

如何让div自动适应自身的img高度
1、首先在编辑器建立了一个静态页面,在body中添加两个div,设置宽度,并设class 为div1和div2,在两个div的class 中添加相同的控制图片的class名为了 ”img“,并为div添加控制宽度的样式:2、在两个div中加入相同的图片, 这个时候需要在img 类中加入css语句设置一下div的高度和宽度,以及div的边...

如何让div的内容自动调整位置?
6、先使用【margin-left:-200px;】“-200px”这个数值自然就是DIV宽width:400px;的一半,并添加为负值。保存后刷新网页可以看到DIV已经左右居中了。7、可以看到不管我们把页面变成什么尺寸,DIV都会自动居中,是不是解决你的问题了呢?以上就是DW让DIV模块在页面中相对屏幕自动居中的教程。p盒子自适应...

...俩个Div里各有一张图片, 如何实现一个Div 就适应屏幕的大小,并且Div...
两个div需要并齐吗?如果不需要的话设置img{width:100%;height:auto;},如果图片高度没有限定的话就用auto,如过有限定的话就只需给div限定的高度,然后设置img的高度为100%就可以了,如果两个div需要并齐或者在指定视窗大小的时候会重新排版则需要加媒体查询了。

web前端怎么让div大小刚好和图片一样大
1.通过采用裁剪图片,根据div盒子设置的宽、高,来更改裁剪图片的尺寸,使图片适配div盒子。2.设置div的具体宽高,图片宽高分别设置为100%,代码具体如下width:100%;height:100%。这种方式,也可以将图片大小填充满盒子。3.如果图片是网页背景图片,还可以通过设置div盒子内属性background-size为cover,...

div浮动到img上边。
1、Pic层设置相对定位,宽高 2、realPic层设置绝对定位、z-index为1 3、overPic层设置绝对定位、z-index为2 完毕~

div大小随图片大小自适应
你好!其实DIV的宽高要适应于图片的大小,那最好的办法就是不在要div里加入任何的CSS高度和宽度,如果你DIV两边还有内容的话,直接加入一个float就够了,至于宽高都改成auto或为空就行。下面我举个例子,两边分别有DIV,中间放置图像,根据图像大小自动适应,你可以参考一下:<div style="float:left"...

html 怎么让img自适应div大小
使html中div内的图片随屏幕大小调节的操作方法为,将div与img的宽度都设置为100%,代码如下:<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" " <html xmlns=" <head><meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/><title>图片大小自适应<\/title...

div如何自适应高度100%
一、用背景图填充法 这里是给父DIV设置了背景图片填充,所有DIV都不设高度。HTML代码:1 <div class="endArea"> 2 <div class="col1">第一列 左边正文<\/div> 3 <div class="col3">第二列 右边<br \/><br \/><br \/><br \/><br \/><br \/><br \/><br \/><br \/><br ...

如何让img标签在div里上下居中?
要让img标签在div里实现上下居中,可以通过CSS样式设置来完成。具体做法如下:首先,为div容器设置宽度和高度。例如宽度为500px,高度为600px。接着,将div容器的display属性设置为table-cell,这将使div呈现为表格单元格的形式,从而在垂直方向上居中。设置div容器的vertical-align属性为middle,这将使div中...

相似回答