mtwm.net
当前位置:首页 >> Css实现图片自适应Div宽高 >>

Css实现图片自适应Div宽高

需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形; 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下

公司的项目中需要显示由用户提供uri链接的图片,可是预先无法获知图片的尺寸大小,如果图片尺寸过大将会影响页面布局.最理想的解决方案自然是自动生成缩略图,涉及的后台工作较为复杂,用css进行控制是一个可以接受的捷径. 如果用

可以在div层上面加一个DIV浮动层,然后使用javascript来控制他们的大小.

像你这么说,貌似只有用js来判断了,首先给图片上下左右居中,给父级元素设置overflow:hidden; 然后用过js来获取当前图片的宽高,如果宽度大于高度,那么就高度为100%,宽度自适应,反之宽度100%,高度自适应;

可以使用background-size: cover来适应DIV元素的高度和亮度.代码如下:<style>div{background:url(图片地址) no-repeat;width:100%;height:auto;background-size:cover;}</style><div>这里是内容</div>background-size 属性规定背景图像的尺寸,IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性.

给div加个样式 然后把div设置成固定大小 添加图片的时候div就不会变了

很简单 ,你应该设置div的display:inline-block然后不要设置宽度就行了

这个都不用js……div不设高的这个属性,就是默认的auto.div本来就是自适应的.给div设置个padding-bottom:5px;底部就多出5px;同理有padding-top padding-left padding-right也可以直接下padding: 上px 右px 下px 左px;就好了不行再说js的事儿

将图片的宽和高的属性设置为100%即可 例如图片的类名为pic .pic{width: 100%; height: 100%}

&lt;div id="container" style="height: 106px;"&gt; &lt;img src="logo.png" style="height: 100%;" /&gt;&lt;/div&gt;<p>这就行了,不能用背景图,背景图是不允许改变大小的.如果想将图片当背景用,可以再加上下面的内容</p> &lt;div id="container2" style="height: 106px; margin-top: -106px;"&gt;Content&lt;/div&gt;

网站首页 | 网站地图
All rights reserved Powered by www.mtwm.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com