文章详情页
css - PC端img适配的问题
问题描述
为了防止图片变形,规定了<img>标签的width:100%;height:auto;但是,这样会出现两种情况:1、图片高度无法填充满容器2、图片高度大于容器的高度针对第二个问题,我直接规定容器overflow:hidden;但是,第一个问题该如何解决,如果将<img>高度设置为100%的话,就会变形.请大神们帮忙解答..
问题解答
回答1:用p代替img 使用background-size:100%;
回答2:图片不变形就需要保证其横纵比->容器与图片横纵比相同->不可修改图片就需要重新规划布局
可修改图片从而达到图片不“变形” 将图片采用background-image
回答3:再提供另一种方案,即容器固定,图片自适合:
img { max-width: 100%; max-height: 100%;}回答4:
可以尝试下楼上的方案,如果不行就需要用JS获取图片宽高再进行判断动态设置width:100%或者height:100%
标签:
CSS
相关文章:
1. java - 当系统出现线程死锁时怎么处理?2. angular.js - 前端使用input使用ng-model绑定数据,控制前中一直无法得到映射的值3. vue计算属性怎么样与for结合使用4. angular.js - angularJS最简单方法实现点击checkbox,button变亮5. javascript - H5下拉能更换页面么 怎么实现 在左右滑的页面中6. angular.js - 关于指令link 中的创建变量问题7. javascript - 请问微信jssdk自定义分享是不是不能用了?8. VUE引入jquery以后,调用方法,提示’$’ is not defined。9. html标签属性元素讲解10. javascript - .vue页面跳转问题
排行榜