为了让IMG自适应大小,如下我做了一个横向自适应的示例:
- IMG样式(横向拉伸,纵向自动匹配大小)
- DIV样式(元素居中显示)
IMG样式
(横向拉伸,纵向自动匹配大小)
width:100%; height:auto;
(纵向拉伸,横向自动匹配大小)
width:auto; height:100%;
DIV样式(元素居中显示)
display:flex; align-items:center; justify-content:center;
做法很简单,只要设置对应图片的width和htight的具体数值就可以了。看下面的例子:
img{ width:auto; height:auto; max-width:100%; max-height:100%; }
这样设置图片的话,可以使图片在指定的空间内缩放。4行的意思是:
- width:auto;图片的宽度自己适应(图片有多宽就显示多宽)
- height:auto;图片的高度自己适应(图片有多高就显示多高)
- width:auto;和height:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)
- max-width:100%;图片的宽度不能超过图片所在的空间的宽度
- max-height:100%;图片的高度不能超过图片所在的空间的高度
- max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。
示例代码
如下是两个大小和比例都不同的图片,应用这个方法可以让图片自动填充并居中显示
让图片自动适应DIV容器大小
以上就是HTML如何让IMG自动适应DIV容器大小的实现方法的详细内容,更多关于HTML IMG自动适应DIV的资料请关注其它相关文章!
网站类容多为转载,如有侵权,请联系站长删除
上一个:HTML实现代码雨源码及效果示例使用canvas实现黑客帝国数字雨效果CSS实现雨滴动画效果的实例代码纯CSS流星雨背景的示例代码使用纯CSS实现动态晴阴雨雪(单标签)CSS 、JS实现浪漫流星雨动画canvas实现漂亮的下雨效果的示例Canvas制作的下雨动画的示例HTML5实现晶莹剔透的雨滴特效HTML5梦幻之旅——炫丽的流星雨效果实现过程用Dreamweaver实现网页上漫天花雨效果的方法
下一个:Html5 video标签视频的最佳实践html5用video标签流式加载的实现html5自定义video标签的海报与播放按钮功能html5视频媒体标签video的使用方法及完整参数说明详解详解Html5中video标签那些属性和方法解决html5中的video标签ios系统中无法播放使用的问题