今天碰到了一个小难题,做手机端的网页时,发现我的图片超过了屏幕原有宽度。
那么今天就来和大家分享一下如何解决这个小错误。
众所周知,我们在做手机端页面时,是不可以出现滚动条的,因为滚动条是手机端页面的禁区。
那么,我们应该如何去解决它呢!我这里有几个小方法大家可以一试。
1.img{max-width:100% !important;height:auto}
这是第一种方法,即给图片增加一个最大宽度,这样一来,即使图片再大,也逃不出屏幕的五指山了。
这一种是最常用也最接近完美的方法。
2.当然还有第二种方法,如果你很幸运的使用的是框架,那么这种方法可能正好解决你的燃眉之急。
示例如下:
我们再写样式的时候,会用style标签引入
<style lang="scss" scoped></style>
如果想解决问题的话,可以将scoped去掉,scoped的作用就是是每一个单个组件的样式不会重复,
我们可以把他去掉,然后给组件内容套一个最大的盒子.box{width: 100%;height: auto;},
找到被渲染的图片位置,加入.introduce-bottom{ max-width: 100%;img{width: 100% !important;
height: auto !important;}
这样就可以轻松的解决问题了哦!