图片太大时不会出现横向滚动条

我们在进行网页页面布局的时候经常会遇到图片大于屏幕的分辨率的问题，如果不进行处理就会出现横向滚动条，十分影响用户的体验，而如果直接将图片宽度设置为屏幕的100%时在进行页面的放大缩小时或者在不同分辨率下图片就会被拉长或者锯断，十分难看，本文就对此提出两种十分简单的解决方法。 第一种简单的思路，就是在img图外层“包”一层（或者多层）标签，然后使这个容器的宽度width为100%，这样有人就会问了，如果我的图超过分辨率，不还是会出现横向滚动条吗？的确，但我们的操作并没有做完，很明显当里面内容大于分辨率的时候相当于有部分已经逸出了，所以需要我们在设置容器的宽度width为100%时同时使逸出隐藏overflow：hidden，就像下面这么写： 就可以使不出现横向滚动条。 第二种思路，我们将图作为背景图插入，就像这样： 也可以实现我们需要的不出现横向滚动条且图片不会放大缩小变形的效果。（注：背景图插入时候没有内容的话需要给容器设置高度不然高度为0看不到效果）