我目前正在尝试使我的网站具有响应能力。我网站的布局方式是在桌面版上并排放置2个col-6,而我网站的这一部分(一页网站)的每一页占用的宽度和高度均为100%,即1页。为了缩放图像,每个col-6具有100%的高度,同样,我的背景尺寸也设置为100%的尺寸。这非常适合桌面版本。

问题是,当我缩小到平板电脑或手机时,每半页使用col-12,将它们彼此堆叠而不是并排放置,则100%尺寸的图像div太大了在数位板上,然后挤压另一个div(因为剖面高度仅为100%)。在移动设备上,它太小了,因此它在图像下方显示了一堆空白。

我觉得要使其正确缩放的唯一方法是在容器上未设置高度,在div中使用img标签而不是背景图片,因为它只会占用所需的空间,并且没有任何额外的。但是问题是,现在它并没有填满内部的整个图像div,在侧面和底部都留有空白。我尝试设置不同的大小,设置等,但是无论我做什么都不会填满它。它在平板电脑和移动设备上也做同样的事情。我该如何工作?

在桌面上的外观(带有背景图片)-http://i988.photobucket.com/albums/af6/jtbitt/24-inch-desktop-responsive_zps6mwocx8l.png

在桌面上的外观(带有img)-http://i988.photobucket.com/albums/af6/jtbitt/desktop%20version%20with%20img_zpsirzeqjy7.png

平板电脑(带有背景图片)-http://i988.photobucket.com/albums/af6/jtbitt/tablet-stacking-improperly_zpsrxkz3ky3.png

平板电脑(img)-http://i988.photobucket.com/albums/af6/jtbitt/tablet%20version%20with%20img_zps2lgo5d4x.png

移动版(带有背景图片)-http://i988.photobucket.com/albums/af6/jtbitt/mobile-stacking-improperly_zps604fz2oy.png

手机(img)-http://i988.photobucket.com/albums/af6/jtbitt/mobile%20version%20with%20img_zpsqmqrw2ib.png

HTML-

<section id="about" ng-controller="aboutController">
  <div class="container-fluid">

    <div class="row about-row">

      <div class="about-left col-xs-12 col-md-6">
        <img src="assets/images/jay-ocean.jpg" class="col-xs-12"/>
      </div>

      <div class="about-right col-xs-12 col-md-6">
        <div class="about-content">
          <div class="about-content-title">
            <h1><strong>I'M JAY.</strong></h1>
          </div>

          <div class="about-content-info">
            <p ng-if="about.firstParagraph">An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging is boring, and makes me yawn. Anything that is seemingly impossible interests me a lot. I'm ready to get to work.</p>

            <p ng-if="!about.firstParagraph">Currently seeking a Javascript position, using the MEAN stack, in New York City. Being innovative, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching ridiculous levels of success, not just modest realistic ones. I love working with a solid team.</p>
          </div>

          <div class="about-button">
            <button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()">MORE =></button>
            <button ng-if="!about.firstParagraph" class="label label-success"><a href="/portfolio">VIEW SKILLS</a></button>
          </div>

          <div class="about-personal-info">
            <h4>Email: [email protected]</h4>
          </div>

          <div class="about-icon">
            <a href="{{ profile.url }}" ng-repeat="profile in about.profiles"><img ng-src="{{ profile.icon }}" /></a>
          </div>
        </div>

      </div>

    </div>

  </div>
</section>


CSS-

#about {
  height: 100%;
  width: 100%;
  background: rgba(0,97,65,1);
  background: -moz-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,97,65,1)), color-stop(7%, rgba(54,135,95,1)), color-stop(22%, rgba(36,123,85,1)), color-stop(53%, rgba(0,97,65,1)), color-stop(76%, rgba(34,121,84,1)), color-stop(90%, rgba(54,135,95,1)), color-stop(100%, rgba(54,135,95,1)));
  background: -webkit-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: -o-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: -ms-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: linear-gradient(to right, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006141', endColorstr='#36875f', GradientType=1 );
  background-repeat: no-repeat;
  color: #101010;
}

/*#about .container-fluid, #about .row {
  height: 100%;
}*/

/*.about-left {
  height: 100%;
  background-image: url('../../images/jay-ocean.jpg');
  background-repeat: no-repeat;
  background-size: 110%;
  border-right: 3px solid #101010;
  border-bottom: 3px solid black;
}*/

/*.about-left img {
  height: 100%;
  width: 100%;
  object-fit: fill;
}*/

.about-right {
  padding-top: 24vh;
  padding-left: 3.4vw;
  text-align: center;
}

.about-content {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.about-content-title {
  padding-bottom: -30px;
}

.about-content-title h1{
  font-size: 3.1vw;
  margin: 3px;
}

.about-content-info p {
  font-size: 1vw;
  word-spacing: 0.3vw;
}

.about-button button {
  color: gray;
  border: 1px solid #101010;
  background-color: #101010;
  font-size: 0.7vw;
}

.about-button a {
  color: gray;
}

.about-personal-info h4 {
  font-size: 1vw;
  word-spacing: 0.3vw;
}

.about-icon img {
  height: 3.5vh;
  width: 1.75vw;
  border-radius: 10px;
  border: 1px solid #101010;
  margin: 3px;
}

最佳答案

为什么不将background-size属性设置为cover值?

08-08 04:28