Блог

Главная - Вопросы по программированию - Как заставить загрузочный образ и div расширяться до ширины браузера

Как заставить загрузочный образ и div расширяться до ширины браузера

#jquery #html #css #twitter-bootstrap

#jquery #HTML #css #twitter-bootstrap

Вопрос:

Здесь я использую макет начальной загрузки, поэтому я хотел бы узнать, как я могу сделать так, чтобы фон изображения растягивался на 100% в ширину, а серый цвет div также растягивался на 100% в ширину?

Я не уверен, следует ли мне использовать жидкость для контейнеров или нет? Любые идеи окажут большую помощь. Спасибо.

Изображение, изображающее то, к чему я пытаюсь стремиться:

введите описание изображения здесь

И что у меня есть до сих пор в этом фрагменте (перейдите на весь экран, чтобы увидеть):

 body {
  background-color: #eee;
}
.heading {
  color: #fff;
  padding: 0 0 0 20px;
  margin-top: -300px;
  margin-bottom: 100px;
}
.profile-info-right-top {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  background-color: #ddd;
}
.profile-info-right-top img {
  padding-right: 10px;
}
.user-profile {
  padding-bottom: 30px;
}
.profile-header-background {
  margin: 0 -30px 0 -30px;
}
.profile-header-background img {
  width: 100%;
  height: 400px;
}
.profile-info-left {
  position: relative;
  top: -180px;
}
.profile-info-left img.avatar {
  border: 2px solid #fff;
}
.profile-info-left h2 {
  font-family: "josefinslab-semibold";
  margin-bottom: 30px;
}
.profile-info-left .section {
  margin-top: 50px;
}
.profile-info-left .section h3 {
  font-size: 1.1em;
  font-weight: 700;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.profile-info-left ul.list-social > li {
  line-height: 2.3;
}
.profile-info-left ul.list-social > li i {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
  top: 1px;
  font-size: 16px;
  min-width: 16px;
  line-height: 1;
}
.profile-info-left ul.list-social > li a {
  color: #696565;
}
.profile-info-right .tab-content {
  padding: 30px 0;
  background-color: transparent;
}
@media screen and (max-width: 768px) {
  .profile-info-right-top {
    position: relative;
    top: -160px;
  }
  .profile-info-right {
    position: relative;
    top: -160px;
  }
}
.user-follower,
.user-following {
  position: relative;
  margin-bottom: 40px;
}
.user-follower img,
.user-following img {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 40px;
}
.user-follower a,
.user-following a {
  font-size: 1.1em;
  line-height: 1;
}
.user-follower .username,
.user-following .username {
  font-size: 0.9em;
  line-height: 1.5;
}
.user-follower .btn,
.user-following .btn {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 92px;
}
.btn-toggle-following {
  background-color: #7bae16;
  color: #fff;
}
.btn-toggle-following:hover {
  background-color: #ef2020;
  color: #fff;
}
.btn-toggle-following:hover span {
  display: none;
}
.btn-toggle-following:hover:after {
  content: 'Unfollow';
  display: inline;
}
.btn-toggle-following:hover i:before {
  content: 'f129';
}
/* list icons */

.list-icons-demo li {
  margin-bottom: 20px;
  text-align: center;
}
.list-icons-demo li i {
  font-size: 24px;
}
.list-icons-demo2 li {
  margin-bottom: 10px;
}
.activity-item {
  overflow: visible;
  position: relative;
  margin: 15px 0;
  border-top: 1px dashed #ccc;
  padding-top: 15px;
}
.activity-item:first-child {
  border-top: none;
}
.activity-item .avatar {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 32px;
}
.activity-item > i {
  font-size: 18px;
  line-height: 1;
}
.activity-item .media-body {
  position: relative;
}
.activity-item .activity-title {
  margin-bottom: 0;
  line-height: 1.3;
}
.activity-item .activity-attachment {
  padding-top: 20px;
}
.activity-item .well {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  border-left: 2px solid #cfcfcf;
  background: #fff;
  margin-left: 20px;
  font-size: 0.85em;
}
.activity-item .thumbnail {
  display: inline;
  border: none;
  padding: 0;
}
.activity-item .thumbnail img {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: auto;
  margin: 0;
}
.activity-item .activity-actions {
  position: absolute;
  top: 15px;
  right: 0;
}
.activity-item .activity-actions .btn i {
  margin: 0;
}
.activity-item .activity-actions .dropdown-menu > li > a {
  font-size: 0.9em;
  padding: 3px 10px;
}
.activity-item   .btn {
  margin-bottom: 15px;
}
.nav-tabs > li > a {
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  cursor: pointer;
}
.nav-pills > li > a {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: #1688ae;
}
.nav-tabs.tabs-iconized > li a,
.nav-pills.tabs-iconized > li a {
  padding-top: 0;
  padding-bottom: 5px;
}
.nav-tabs.tabs-iconized > li i,
.nav-pills.tabs-iconized > li i {
  position: relative;
  margin-right: 3px;
  top: 4px;
  font-size: 24px;
}
.tab-content {
  padding: 30px 15px 15px 15px;
  background-color: #fff;
}
.nav.nav-tabs-custom-colored > li > a {
  border-color: #ccc;
  border-bottom: transparent;
}
.nav.nav-tabs-custom-colored > li > a:hover,
.nav.nav-tabs-custom-colored > li > a:focus {
  background-color: #1688ae;
}
.nav-tabs.nav-tabs-custom-colored {
  border-bottom-color: #1688ae;
}
.nav-tabs.nav-tabs-custom-colored > li {
  z-index: 0;
  margin-bottom: 0;
  background-color: #fff;
}
.nav-tabs.nav-tabs-custom-colored > li > a {
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
  color: #696565;
  margin-right: 0;
}
.nav-tabs.nav-tabs-custom-colored > li > a:hover,
.nav-tabs.nav-tabs-custom-colored > li > a:focus {
  color: #fff;
  border-color: #1688ae;
}
.nav-tabs.nav-tabs-custom-colored > li.active > a,
.nav-tabs.nav-tabs-custom-colored > li.active > a:hover,
.nav-tabs.nav-tabs-custom-colored > li.active > a:focus {
  color: #fff;
  background-color: #1688ae;
  border-color: #1688ae;
  border-bottom: transparent;
}
.nav-tabs > li.active {
  z-index: 1;
}
.nav-pills-custom-minimal {
  border-bottom: 1px solid #ccc;
}
.nav-pills-custom-minimal > li > a {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  padding: 10px;
  border-top: 4px solid transparent;
  color: #696565;
}
.nav-pills-custom-minimal > li > a:hover,
.nav-pills-custom-minimal > li > a:focus {
  background-color: transparent;
  color: #4f4c4c;
}
.nav-pills-custom-minimal > li.active > a,
.nav-pills-custom-minimal > li.active > a:hover,
.nav-pills-custom-minimal > li.active > a:focus {
  background-color: transparent;
  border-top-color: #94c632;
  color: #696565;
}
.nav-pills-custom-minimal > li   li {
  margin-left: 30px;
}
@media screen and (max-width: 480px) {
  .nav-pills-custom-minimal > li   li {
    margin-left: 0;
  }
}
.nav-pills-custom-minimal.custom-minimal-bottom > li a {
  border-top: none;
  border-bottom: 4px solid transparent;
}
.nav-pills-custom-minimal.custom-minimal-bottom > li.active > a,
.nav-pills-custom-minimal.custom-minimal-bottom > li.active > a:hover,
.nav-pills-custom-minimal.custom-minimal-bottom > li.active > a:focus {
  border-bottom-color: #94c632;
}  
 <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <div class="user-profile">
    <div class="profile-header-background">
      <img src="http://placekitten.com/1000/400" alt="Profile Header Background">
    </div>
    <div class="row">
      <div class="col-md-12 heading">
        <h2>User name</h2>
        <span>title</span>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="profile-info-left">
          <div class="text-left">
            <img src="http://placekitten.com/310/400" alt="Avatar" class="avatar">
          </div>
          <div class="action-buttons">
            <div class="row">
              <div class="col-xs-6">
                <a href="#" class="btn btn-success btn-block"><i class="fa fa-plus-round"></i> Follow</a>
              </div>
              <div class="col-xs-6">
                <a href="#" class="btn btn-primary btn-block"><i class="fa fa-android-mail"></i> Message</a>
              </div>
            </div>
          </div>
          <div class="section">
            <h3>About</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="clearfix profile-info-right-top">
          <div class="col-md-12">
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />
            <img src="http://placehold.it/30x30" />

          </div>
        </div>

        <div class="profile-info-right">
          <ul class="nav nav-pills nav-pills-custom-minimal custom-minimal-bottom">
            <li class="active"><a href="#activities" data-toggle="tab">HEADING</a>
            </li>
            <li><a href="#followers" data-toggle="tab">HEADING</a>
            </li>
            <li><a href="#following" data-toggle="tab">HEADING</a>
            </li>
          </ul>
          <div class="tab-content">
            <!-- activities -->
            <div class="tab-pane fade in active" id="activities">
              <div class="media activity-item">
                <a href="#" class="pull-left">
                  <img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                  <p class="activity-title"><a href="#">Antonius</a> started following <a href="#">Jack Bay</a>  <small class="text-muted">- 2m ago</small>
                  </p>
                  <small class="text-muted">Today 08:30 am - 02.05.2014</small>
                </div>
                <div class="btn-group pull-right activity-actions">
                  <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#">I don't want to see this</a>
                    </li>
                    <li><a href="#">Unfollow Antonius</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Get Notification</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="media activity-item">
                <a href="#" class="pull-left">
                  <img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                  <p class="activity-title"><a href="#">Jane Doe</a> likes <a href="#">Jack Bay</a>  <small class="text-muted">- 36m ago</small>
                  </p>
                  <small class="text-muted">Today 07:23 am - 02.05.2014</small>
                </div>
                <div class="btn-group pull-right activity-actions">
                  <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#">I don't want to see this</a>
                    </li>
                    <li><a href="#">Unfollow Jane Doe</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Get Notification</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="media activity-item">
                <a href="#" class="pull-left">
                  <img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                  <p class="activity-title"><a href="#">Michael</a> posted something for <a href="#">Jack Bay</a>  <small class="text-muted">- 1h ago</small>
                  </p>
                  <small class="text-muted">Today 07:23 am - 02.05.2014</small>
                  <div class="activity-attachment">
                    <div class="well well-sm">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </div>
                  </div>
                </div>
                <div class="btn-group pull-right activity-actions">
                  <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#">I don't want to see this</a>
                    </li>
                    <li><a href="#">Unfollow Michael</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Get Notification</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="media activity-item">
                <a href="#" class="pull-left">
                  <img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                  <p class="activity-title"><a href="#">Jack Bay</a> has uploaded two photos <small class="text-muted">- Yesterday</small>
                  </p>
                  <small class="text-muted">Yesterday 06:42 pm - 01.05.2014</small>
                  <div class="activity-attachment">
                    <div class="row">
                      <div class="col-md-6">
                        <a href="#" class="thumbnail">
                          <img src="http://placekitten.com/210/210" alt="Uploaded photo">
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="btn-group pull-right activity-actions">
                  <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#">I don't want to see this</a>
                    </li>
                    <li><a href="#">Unfollow Jack Bay</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Get Notification</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="media activity-item">
                <a href="#" class="pull-left">
                  <img src="http://placekitten.com/20/20" alt="Avatar" class="media-object avatar">
                </a>
                <div class="media-body">
                  <p class="activity-title"><a href="#">Jack Bay</a> has changed his profile picture <small class="text-muted">- 2 days ago</small>
                  </p>
                  <small class="text-muted">2 days ago 05:42 pm - 30.04.2014</small>
                  <div class="activity-attachment">
                    <a href="#" class="thumbnail">
                      <img src="http://placekitten.com/210/210" alt="Uploaded photo">
                    </a>
                  </div>
                </div>
                <div class="btn-group pull-right activity-actions">
                  <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#">I don't want to see this</a>
                    </li>
                    <li><a href="#">Unfollow Jack Bay</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">Get Notification</a>
                    </li>
                  </ul>
                </div>
              </div>
              <button type="button" class="btn btn-default center-block"><i class="fa fa-refresh"></i> Load more activities</button>
            </div>
            <!-- end activities -->
            <!-- followers -->
            <div class="tab-pane fade" id="followers">
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Antonius<br><span class="text-muted username">@mrantonius</span></a>
                  <button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i>  <span>Following</span>
                  </button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Michael<br><span class="text-muted username">@iamichael</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Stella<br><span class="text-muted username">@stella</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Jane Doe<br><span class="text-muted username">@janed</span></a>
                  <button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i>  <span>Following</span>
                  </button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">John Simmons<br><span class="text-muted username">@jsimm</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Antonius<br><span class="text-muted username">@mrantonius</span></a>
                  <button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i>  <span>Following</span>
                  </button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Michael<br><span class="text-muted username">@iamichael</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Stella<br><span class="text-muted username">@stella</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Jane Doe<br><span class="text-muted username">@janed</span></a>
                  <button type="button" class="btn btn-sm btn-toggle-following pull-right"><i class="fa fa-checkmark-round"></i>  <span>Following</span>
                  </button>
                </div>
              </div>
              <div class="media user-follower">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">John Simmons<br><span class="text-muted username">@jsimm</span></a>
                  <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-plus"></i> Follow</button>
                </div>
              </div>
            </div>
            <!-- end followers -->
            <!-- following -->
            <div class="tab-pane fade" id="following">
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Stella<br><span class="text-muted username">@stella</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Jane Doe<br><span class="text-muted username">@janed</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">John Simmons<br><span class="text-muted username">@jsimm</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Antonius<br><span class="text-muted username">@mrantonius</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Michael<br><span class="text-muted username">@iamichael</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
              <div class="media user-following">
                <img src="http://placekitten.com/20/20" alt="User Avatar" class="media-object pull-left">
                <div class="media-body">
                  <a href="#">Stella<br><span class="text-muted username">@stella</span></a>
                  <button type="button" class="btn btn-sm btn-danger pull-right"><i class="fa fa-close-round"></i> Unfollow</button>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Ответ №1:

Переместите изображение основного заголовка и миниатюры из .container класса, поскольку вы не хотите ограничивать их ширину при различных размерах области просмотра, что .container и происходит.

Таким образом, псевдокод будет:

 <header>
  <img>
  <thumbnails>
</header>
<main>
  <leftcolumn>
    <img>
  </leftcolumn>
  <rightcolumn>
    <text>
    <text>
  </rightcolumn>
</main>

Чтобы сохранить эскизы в соответствии с изображением и содержимым в основном тексте, вам нужно будет скопировать .col-md-** классы, которые вы использовали в основном тексте, вокруг эскизов.

Поскольку вы хотите перекрывать содержимое, я бы добавил отрицательное поле в левый столбец, чтобы переместить его вверх и поверх содержимого заголовка.

Ниже приведена некоторая базовая разметка для демонстрации предложенного мной подхода.

 header .primary-img {
  width: 100%;
}
.img-list {
  background-color: #eee;
}
.img-list ul,
.img-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.img-list li {
  display: inline-block;
  margin: 1.5rem 0.5rem;
}
.content {
  margin: 50px 0;
}
@media (min-width: 992px) {
  .content .left {
    margin-top: -225px;
  }
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="primary-header">
  <img class="primary-img" src="http://placehold.it/1200x400">
  <div class="img-list">
    <div class="container">
      <div class="row">
        <div class="col-md-offset-4 col-md-8">
          <ul>
            <li>
              <img src="http://placehold.it/50x50amp;text=1">
            </li>
            <li>
              <img src="http://placehold.it/50x50amp;text=2">
            </li>
            <li>
              <img src="http://placehold.it/50x50amp;text=3">
            </li>
            <li>
              <img src="http://placehold.it/50x50amp;text=4">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>
<main class="content">
  <div class="container">
    <div class="row">
      <div class="left col-md-4">
        <img class="img-responsive" src="http://placehold.it/300x400/ffcc00">
      </div>
      <div class="col-md-8">
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
      </div>
    </div>
  </div>
</main>

Примечание: Обратите внимание, что я учел, как обрабатывать экраны меньшего размера, где наложение изображения, вероятно, не будет работать, и его нужно будет переместить.

Редактировать

В комментариях ниже я добавил решение для перемещения изображения аватара.

Если все, что вам нужно сделать, это переместить изображение аватара из одного региона в другой, самое простое, что можно сделать, это включить его в разметку, где оно вам нужно дважды. Затем используйте медиа-запросы, чтобы скрыть / показать соответствующий аватар для размера экрана.

Я сделал каждое изображение другого цвета, чтобы вы могли легко идентифицировать переключатель.

 header .primary-img {
  width: 100%;
}
.img-list {
  background-color: #eee;
}
.img-list ul,
.img-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.img-list li {
  display: inline-block;
  margin: 1.5rem 0.5rem;
}
.content {
  margin: 50px 0;
}
.sidebar-avatar {
  display: none;
}
@media (min-width: 992px) {
  .header-avatar {
    display: none;
  }
  .sidebar-avatar {
    display: block;
  }
  .content .left {
    margin-top: -225px;
  }
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="primary-header">
  <img class="primary-img" src="http://placehold.it/1200x400">
  <div class="header-avatar">
    <img class="img-responsive" src="http://placehold.it/300x400/ffcc00?text=avatar 1">
  </div>
  <div class="img-list">
    <div class="container">
      <div class="row">
        <div class="col-md-offset-4 col-md-8">
          <ul>
            <li>
              <img src="http://placehold.it/50x50amp;text=1">
            </li>
            <li>
              <img src="http://placehold.it/50x50amp;text=2">
            </li>
            <li>
              <img src="http://placehold.it/50x50amp;text=3">
            </li>
            <li>
              <img src="http://placehold.it/50x50amp;text=4">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>
<main class="content">
  <div class="container">
    <div class="row">
      <div class="left col-md-4">
        <div class="sidebar-avatar">
        <img class="img-responsive" src="http://placehold.it/300x400/A3D76F?text=avatar 2">
        </div>
      </div>
      <div class="col-md-8">
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
        <p>
          Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
        </p>
      </div>
    </div>
  </div>
</main>

Комментарии:

1. это почти идеально! как я мог бы сделать так, чтобы серый div с изображениями был ниже аватара? Этого просто достичь?

2. Ниже желтого изображения в моей демонстрации (на меньших экранах)?

3. Как насчет содержимого под этим изображением? Куда это относится к содержимому справа от изображения?

4. Да, это имеет смысл. Я добавил новый фрагмент ниже оригинала. Не уверен, куда должно идти содержимое под аватаром. Я сделал каждое изображение аватара другого цвета, чтобы вы могли легко увидеть его переключение.

5. Желтый отображается для экранов меньшего размера. Вы бы использовали отрицательное поле (не отступ), как и желтое изображение, для перекрытия. Хотя вам, возможно, придется сделать ваш большой заголовок заданной высоты, поскольку установка фиксированного отрицательного поля может перекрывать большую часть большого изображения заголовка, чем вы хотите.

Ответ №2:

Я не совсем понимаю, что вы пытаетесь сделать и как это исправить, но из-за характера вашего css и изображения, которое вы пытаетесь воспроизвести, я думаю, вам следует использовать следующие свойства:

  • Фоновое изображение (для управления изображением как фоном, а не как тегом img)
  • Положение фона (для размещения изображения в центре)
  • Повторение фона (значение ‘no-repeat’ позволяет покрывать фон одним изображением)
  • Размер фона (значение ‘cover’ может быть полезно для покрытия всего фона элемента, чтобы он мог иметь 100% ширины его элемента)

Я думаю, что этот урок тоже был бы очень полезен.

Пожалуйста, сообщите нам, можем ли мы предоставить какую-либо дополнительную помощь.

Комментарии:

1. Диас Аллан Я на самом деле пытаюсь сделать то, что на изображении, которое я предоставил в первую очередь. Чтобы сделать изображение div и серый div растянутыми на 100% ширины браузера..

Ответ №3:

Переместить:-

 <div class="profile-header-background">
  <img src="http://placekitten.com/1000/400" alt="Profile Header Background">
</div>
<div class="clearfix profile-info-right-top">
      <div class="col-md-12">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">
        <img src="http://placehold.it/30x30">

      </div>
    </div>

Над классом контейнера.

Однако вам нужно будет исправить содержимое col-md-12.

Ответ №4:

Для изображения и серого div вы должны использовать оболочку вокруг контейнера. Не используйте container-fluid, так как ваша основная структура столбцов будет испорчена. Попробуйте добавить еще один div вокруг вашего контейнера и придать этому div фоновое изображение / цвет.

Для вашего фонового изображения используйте следующий код:

 <div class="profile-header-background">
</div>
<div class="grey-div">
   <div class="container grey-container">
      ..place your grey content here..
   </div>
</div>
<div class="container">
  ..place your content here..
</div>

С помощью следующего CSS:

 .profile-header-background {
   height: 400px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-image: url('http://placecage.com/1000/400');
   width: 100%;
}
.grey-div {
   background: grey;
}

Поскольку вы используете margin-top: -300px , вы можете просто разместить свой контейнер снаружи и после фонового изображения.

Комментарии:

1. а как насчет серого div, который я также хочу на 100% шире? Должен ли я поместить его за пределы контейнера также под заголовком профиля?

2. Также добавлен серый div, см. Ответ @Krystyna. Да, вы должны