图片超出规模？ CSS

Question

我正在为学校开展这个项目，在我们网站的某个地方，我们必须把我们的面孔放在那里以获得信誉。然而，我正在处理他的两个不同的文件，一个用于搞乱，另一个用于真实项目。在乱七八糟的文件中，结果看起来像这样，

它看起来很棒！在我看来。然而，当我将编码转移到真实项目时，它看起来像这样。

我不明白。我使用了从第一个文件到下一个文件的相同编码。这是我用于相同页面的编码。请有人帮助我。这里还有我尝试做JsFiddle的三张图片的链接，但由于图像不存在，我无法弄明白。我很抱歉，如果我听起来很蠢，我就是新手。图像的链接将在下面的评论中。

HTML：

    <ul class="bio-all">
    <li>
        <a class="photo" href="">
        <div class="photo-bg" style="background:url(../parallax/img/nat.jpg) center center ; -webkit-background-size: cover; background-size: cover;"></div>
        <div class="name">
            <h5>Natalie Perez</h5>
            <p>Lead Designer/Co-Founder</p>
        </div>
        </a>
    </li>
    <li>
        <a class="photo" href="">
        <div class="photo-bg" style="background:url(../parallax/img/kylee.jpg) center center ; -webkit-background-size: cover; background-size: cover;"></div>
        <div class="name">
            <h5>Kyle Mendoza</h5>
            <p>CEO/Co-Founder</p>
        </div>
        </a>
    </li>
    <li>
        <a class="photo" href="">
        <div class="photo-bg" style="background:url(../parallax/img/maxx.jpg) top center ; -webkit-background-size: cover; background-size: cover;"></div>
        <div class="name">
            <h5>Max Becker</h5>
            <p>CCO/Co-Founder</p>
        </div>
        </a>
    </li>


</ul>

CSS：

    ul.bio-all {
overflow: hidden;
background: #313131;
    }
    ul.bio-all li {
float: left;
width: 33.33%;
position: relative;
overflow: hidden
    }

    ul.bio-all .photo-bg {
    -webkit-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
   opacity: 0.4;
    height: 500px;   
width: 100%;
    }
    ul.bio-all a.photo:hover .photo-bg { opacity: 1; }

    ul.bio-all .name{
    position: absolute;
    width: 100%;
    margin: -80px auto 0;
z-index: 4;
    text-align: center;
     }
     ul.bio-all .name h5{
 text-transform: uppercase;
 color: #FFF;
  letter-spacing: 3px;
  font-size: 24px;
  margin: 0 0 5px 0;
       }
       ul.bio-all .name p {
   text-transform: uppercase;
   letter-spacing: 4px;
   font-size: 14px;
   color: #A0A0A0;
        }
        ul.bio-all  a.photo:hover .name p {
    color: #FFF;
        }

        @media screen and (max-width: 1600px) {
        ul.bio-all .logo img {
    width: 200px;
    padding: 150px 0;
         }
         ul.bio-all .photo-bg {
         height: 400px;   
           }
           ul.bio-all .name h5{
       font-size: 18px;
        margin: 0;
              }
             ul.bio-all .name p {
         font-size: 12px;
              }
               }
               @media screen and (max-width: 1200px) {
               ul.bio-all .logo img {
           width: 160px;
            padding: 130px 0;
                 }
                 ul.bio-all .photo-bg {
                 height: 350px;   
                  }
                   }
                    @media screen and (max-width: 1000px) {
                    ul.bio-all li {
               float: left;
                width: 50%;
                     }
                      }

                       @media screen and (max-width: 600px) {
                       ul.bio-all li { width: 100%; }
                          }

                         @media screen and (orientation: portrait) and (max-device-width : 1280px), screen and (orientation: landscape)and (max-device-width : 1280px) {
                 ul.bio-all .photo-bg {
                -webkit-transition: none;
                 transition: none;
opacity: 0.6 !important;
          }
        ul.bio-all  a.photo .name p {
color: #FFF;
       }
          }