Javascript 如何在网格/图库视图中将图像显示为自动响应大小？

我使用一些资源创建了这个页面。但我需要在输出图片中显示图像。 另外，侧边栏在加载页面时会自动打开，我需要在默认情况下关闭它

我曾尝试在JavaScript中切换类，但页面加载后关闭动画会显示一次。这很烦人

（函数（）{
$（'#msbo'）。在（'click'，function（）上{
$（'body'）.toggleClass（'msb-x'）；
});
}());
.navbar默认值{
左边距：200px；
}
.msb{
宽度：200px；
背景色：#F5F7F9；
位置：固定；
左：0；
排名：0；
右：自动；
最小高度：100%；
溢出y：自动；
空白：nowrap；
身高：100%；
z指数：1；
右边框：1px实心#ddd；
}
.msb.navbar{
边界：无；
左边距：0；
背景色：继承；
}
.msb.navbar标题{
宽度：100%；
边框底部：1px实心#e7e7e7；
边缘底部：20px；
背景：#fff；
}
.msb.navbar导航面板{
边界：0无；
盒影：无；
保证金：0；
背景：继承；
}
.msb.navbar nav li{
显示：块；
宽度：100%；
}
.msb.navbar nav li a{
填充：15px；
颜色：5F5F；
}
.msb.navbar导航李a.glyphicon，
.msb.navbar nav li a.fa{
右边距：8px；
}
.msb.nb{
垫面：5px；
左侧填充：10px；
边缘底部：30px；
溢出：隐藏；
}
美国内华达州，
ul.ns{
位置：相对位置；
填充：0；
列表样式：无；
}
内华达州{
/*导航潜艇*/
}
李女{
显示：块；
位置：相对位置；
}
.nv li：：之前{
明确：两者皆有；
内容：“；
显示：表格；
}
李娜女士{
颜色：#444；
填充：10px 25px；
显示：块；
垂直对齐：中间对齐；
}
.nv li a.ic{
字体大小：16px；
右边距：5px；
字体大小：300；
显示：内联块；
}
内华达州李安{
填充：10px 50px；
}
/*主要内容包装*/
mcw先生{
左边距：200px；
位置：相对位置；
最小高度：100%；
/*内容视图*/
}
/*全球的*/
A.
答：焦点，
a:悬停{
文字装饰：无；
}
.收件箱.容器液体{
左侧填充：0；
右边填充：0；
}
.ul，
.李先生{
保证金：0；
填充：0；
}
李国宝先生{
列表样式：无；
}
.李安先生{
显示：块；
填充：10px 20px；
}
msb先生，
.mnb{
-moz动画：向前滑动300毫秒；
-o型动画：向前滑动300毫秒；
-webkit动画：向前滑动300毫秒；
动画：向前滑动300毫秒；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
}
mcw先生{
-moz动画：身体向前滑动300毫秒；
-o型动画：身体向前滑动300毫秒；
-webkit动画：身体向前滑动300毫秒；
动画：身体向前滑动300毫秒；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
}
body.msb-x.mcw，
body.msb-x.mnb{
左边距：0；
-moz动画：身体向前滑动300毫秒；
-o型动画：身体向前滑动300毫秒；
-webkit动画：身体向前滑动300毫秒；
动画：身体向前滑动300毫秒；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
}
body.msb-x.msb{
-moz动画：向前滑动300毫秒；
-o型动画：向前滑动300毫秒；
-webkit动画：向前滑动300毫秒；
动画：向前滑动300毫秒；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
}
/*滑入动画*/
@-moz关键帧幻灯片{
0% {
左：-200px；
}
100% {
左：0；
}
}
@-webkit关键帧幻灯片{
0% {
左：-200px；
}
100% {
左：0；
}
}
@关键帧幻灯片{
0% {
左：-200px；
}
100% {
左：0；
}
}
@-moz关键帧滑出{
0% {
左：0；
}
100% {
左：-200px；
}
}
@-webkit关键帧滑出{
0% {
左：0；
}
100% {
左：-200px；
}
}
@关键帧滑出{
0% {
左：0；
}
100% {
左：-200px；
}
}
@-moz关键帧bodyslidein{
0% {
左：0；
}
100% {
左边距：200px；
}
}
@-webkit关键帧bodyslidein{
0% {
左：0；
}
100% {
左：0；
}
}
@关键帧bodyslidein{
0% {
左边距：0；
}
100% {
左边距：200px；
}
}
@-moz关键帧bodyslideout{
0% {
左边距：200px；
}
100% {
右边距：0；
}
}
@-webkit关键帧躯干滑出{
0% {
左边距：200px；
}
100% {
左边距：0；
}
}
@关键帧躯干滑出{
0% {
左边距：200px；
}
100% {
左边距：0；
}
}
.video list thumbs>li{
边缘底部：12px；
}
.video list thumbs>li>a{
显示：块；
位置：相对位置；
背景色：#111；
颜色：#fff；
填充：8px；
边界半径：4px；
}
.video list thumbs>li>a:悬停{
盒影：0 2px 5px rgba（0,0,0,3）；
文本装饰：无
}
.视频列表大拇指h2{
底部：0；
字体大小：14px；
高度：33像素；
利润率：8px0；
}
.视频列表拇指.字形图标播放圆圈{
字体大小：60px；
不透明度：0.6；
位置：绝对位置；
右：39%；
最高：31%；
文本阴影：0 1px 3px rgba（0,0,0,5）；
过渡：所有500ms的缓进缓出；
}
.video list thumbs>li>a:hover.glyph图标播放圆圈{
颜色：#fff；
不透明度：1；
文本阴影：0 1px 3px rgba（0,0,0,8）；
}
.视频列表拇指.持续时间{
背景色：rgba（0,0,0,0.4）；
边界半径：2px；
颜色：#fff；
字体大小：11px；
字体大小：粗体；
左：12px；
线高：13px；
衬垫：2件3件1件；
位置：绝对位置；
顶部：12px；
过渡：所有500ms缓解；
}
.video list thumbs>li>a:悬停。持续时间{
背景色：#000；
}
@介质（最小宽度：320px）和（最大宽度：480px）{
.视频列表拇指.字形图标播放圆圈{
字体大小：35px；
右：36%；
最高：27%；
}
.视频列表大拇指h2{
底部：0；
字体大小：12px；
高度：22px；
利润率：8px0；
}
}
身体{
背景色：#fff；
字号：18px；
字母间距：0.01em；
}

视频可视化仪
.mcw .container ul {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      height: 100VH;
      align-content: flex-start;
     }

.col-lg-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: unset;
  max-width: 25%;
}

.col-sm-4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.333333%;
  flex: unset;
  max-width: 33.333333%;
}