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

Css图片自适应宽高

css实现图片自适应容器宽高的做法一般如下所示 <style> div{width: 200px; height: 200px} div img{width: 100%; height: 100%}</style><div> <img src="xxxx.png" /></div> 当外层容器的宽高比跟图片宽高比

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

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

<script language="JavaScript"> <!-- var flag=false; function DrawImage(ImgD){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height>= ImgD.width/ImgD.height){ if(image.width

&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;

纯css实现有很多局限性,建议使用js .img{ max-height:100%; max-width:100%; } //缺点 如果图片宽高同时大于父容器,图片会被拉伸使用js辅助:(部分api为h5特有,注意兼容性) var oImg = document.querySelector('.img');oImg.

强制定义图片的宽度为DIV宽度(img{width:div的宽度;height:auto;}),高度自动,图片就会等比例缩放

一般定义一个全站大小,然后再安全一个大框div width:100%,图片定义一个max-width:1903px,width:100%就可以做到了,但是图片大小本身还是个问题,如果如果超出居中的话可以用上margin:0 auto ; background:url() center top大概也能做到.

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

你先套一个div.将图片设置为这个div的背景,同时设置背景图片,横向平铺和纵向平铺.你可以把div的宽度固定.高度自适应.然后,你可以在div里面添加内容.呵呵.添加什么添加多少都没问题了.

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