移动端的图片超过屏幕的宽度

      今天碰到了一个小难题，做手机端的网页时，发现我的图片超过了屏幕原有宽度。

    那么今天就来和大家分享一下如何解决这个小错误。

    众所周知，我们在做手机端页面时，是不可以出现滚动条的，因为滚动条是手机端页面的禁区。

    那么，我们应该如何去解决它呢！我这里有几个小方法大家可以一试。

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

    这样就可以轻松的解决问题了哦！