麻烦注释一下这段图片滑动显示的代码，看不懂什么意思

Question

麻烦注释一下这段图片滑动显示的代码，看不懂什么意思（纯小白）
我的网页前端显示区域宽度是800px，素材图片都是1000px的宽度，高度不等，用这段代码，前端页面显示的单个图片都是800px的宽度，有些图片太高了，一个屏幕显示不完整，需要滑动滚动条把页面往下面拉才能看到图片下面的一部分。应该改哪个数据才能控制成当前屏幕显示宽度为800，高度自适应呢?我自己改了一下不同的数值试验效果，没试出来，麻烦大侠指点一下。

左右滑动查看更多

<section>
    <section style="margin: 1em auto;white-space: normal;text-align: center;padding: 5px;border-width: 1px;border-style: solid;border-color: rgb(221, 221, 221);overflow: hidden;box-sizing: border-box;">
        <section style="white-space: nowrap;overflow-x: scroll;">
            <section style="display: inline-block;overflow-wrap: break-word;white-space: normal;vertical-align: top;width: 100%;">
                <img src="http://img02.tooopen.com/images/20141230/sy_78054644133.jpg" style="display: inline-block; width: 1000px; height: 1400px;" title="" width="800" height="1400" border="0" vspace="0" alt="" data-bd-imgshare-binded="1"/>
            </section>
            <section style="display: inline-block;overflow-wrap: break-word;white-space: normal;vertical-align: top;width: 100%;">
                <img src="http://img02.tooopen.com/images/20141230/sy_78054196536.jpg" style="display: inline-block; width: 1000px; height: 1400px;" title="" width="800" height="1400" border="0" vspace="0" alt="" data-bd-imgshare-binded="1"/>
            </section>           
        </section>
        <p style="line-height: 32px;margin: 10px;">
            <strong><span style="font-size: 12px;color: rgb(128, 128, 128);">左右滑动查看更多</span></strong>
        </p>
    </section>
</section>