Question

我有一个包含横向和纵向图像的投资组合页面。我需要的是通过以下方式准确地分配它们（例如，连续3个，其间有空格）：

裁剪成相同尺寸的所有图像（例如正方形）在此处输入代码
仅将肖像图像裁剪为横向
以一种很好的方式分配所有内容，以便它自动适应＆＃34; - 我觉得它过于复杂了

毋庸置疑 - 解决方案应该适用于不同的屏幕尺寸。

非常感谢任何帮助。

＆＃13;

/*HEADER*/

#logo {
  margin-top: 12px;
}


/*BODY*/

body {
  background-color: #262626;
  padding-top: 70px;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
}

.row > div > a > img {
  width: 100%;
  display: block;
}

.top-buffer {
  margin-top: 25px;
}


/*DROPDOWN*/

ul.nav li.dropdown:hover > ul.dropdown-menu {
  display: block;
  background-color: #1e1e1e;
}

.navbar-nav > li > .dropdown-menu > li > a {
  color: #aaa;
}

.navbar-nav > li > .dropdown-menu > li > a:hover {
  color: #fff;
  background-color: #161616;
}


/*FOOTER*/

#footer-bottom {
  min-height: 30px;
  line-height: 30px;
  width: 100%;
  color: #777;
}

#footer-bottom > li > i {
  margin-left: -5px;
}

.copyright {
  padding-top: 15px;
}

#email_footer {
  padding-top: 15px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="collapse navbar-collapse">
    <nav class="navbar navbar-inverse navbar-fixed-top container-fluid">
      <div class="container">
        <a href="http://feanor.cz/">
          <img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" width="200" alt="Feanor Studio">
        </a>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="http://feanor.cz/home/">Home</a></li>
          <li class="dropdown">
            <a href="http://feanor.cz/portfolio/photo/" data-toggle="dropdown" class="dropdown-toggle">
                                Photo<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="http://feanor.cz/portfolio/photo/portrait">Portrait</a>
              </li>
              <li><a href="http://feanor.cz/portfolio/photo/wedding">Wedding</a></li>
              <li><a href="http://feanor.cz/portfolio/photo/car">Cars</a></li>
              <li><a href="http://feanor.cz/portfolio/photo/product">Products</a></li>
              <li><a href="http://feanor.cz/portfolio/photo/interior">Interior</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="http://feanor.cz/portfolio/painting/" data-toggle="dropdown" class="dropdown-toggle">
                                Paintings<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="http://feanor.cz/portfolio/painting/oil">Oil</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="http://feanor.cz/contact/">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="container">
    <div class="row top-buffer">
      <div class="col-md-4">
        <a class="fancybox" rel="group" href="http://feanor.cz/public/img/photo/portrait/1_p_.jpg">
          <img class="portrait" src="http://feanor.cz/public/img/photo/portrait/1_p_t.jpg" alt="image 1_p_.jpg">
        </a>
      </div>
      <div class="col-md-4">
        <a class="fancybox" rel="group" href="http://feanor.cz/public/img/photo/portrait/2_p_.jpg">
          <img class="portrait" src="http://feanor.cz/public/img/photo/portrait/2_p_t.jpg" alt="image 2_p_.jpg">
        </a>
      </div>
      <div class="col-md-4">
        <a class="fancybox" rel="group" href="http://feanor.cz/public/img/photo/portrait/3.jpg">
          <img class="landscape" src="http://feanor.cz/public/img/photo/portrait/3t.jpg" alt="image 3.jpg">
        </a>
      </div>
      <div class="col-md-4">
        <a class="fancybox" rel="group" href="http://feanor.cz/public/img/photo/portrait/4.jpg">
          <img class="landscape" src="http://feanor.cz/public/img/photo/portrait/4t.jpg" alt="image 4.jpg">
        </a>
      </div>
      <div class="col-md-4">
        <a class="fancybox" rel="group" href="http://feanor.cz/public/img/photo/portrait/5.jpg">
          <img class="landscape" src="http://feanor.cz/public/img/photo/portrait/5t.jpg" alt="image 5.jpg">
        </a>
      </div>
      <div class="col-md-4">
        <a class="fancybox" rel="group" href="http://feanor.cz/public/img/photo/portrait/6.jpg">
          <img class="landscape" src="http://feanor.cz/public/img/photo/portrait/6t.jpg" alt="image 6.jpg">
        </a>
      </div>
      <div class="col-md-4">
        <a class="fancybox" rel="group" href="http://feanor.cz/public/img/photo/portrait/7.jpg">
          <img class="landscape" src="http://feanor.cz/public/img/photo/portrait/7t.jpg" alt="image 7.jpg">
        </a>
      </div>
      <div class="col-md-4">
        <a class="fancybox" rel="group" href="http://feanor.cz/public/img/photo/portrait/8.jpg">
          <img class="landscape" src="http://feanor.cz/public/img/photo/portrait/8t.jpg" alt="image 8.jpg">
        </a>
      </div>
      <div class="col-md-4">
        <a class="fancybox" rel="group" href="http://feanor.cz/public/img/photo/portrait/9_p_.jpg">
          <img class="portrait" src="http://feanor.cz/public/img/photo/portrait/9_p_t.jpg" alt="image 9_p_.jpg">
        </a>
      </div>
    </div>
  </div>
</body>

＆＃13;

在Bootstrap网格中分配/裁剪不同大小的图像

0 个答案: