Question

我想将这些项目对齐：

Portfolio grid

由于我对所发生的事情几乎没有任何线索，因此我将粘贴我认为相关的代码：

＆＃13;

#portfolio .portfolio-item {
      margin: 0 0 15px;
      right: 0;
    }
    #portfolio .portfolio-item .portfolio-link {
      display: block;
      position: relative;
      max-width: 400px;
      margin: 0 auto;
    }
    #portfolio .portfolio-item .portfolio-caption {
      max-width: 400px;
      margin: 0 auto;
      background-color: white;
      text-align: center;
      padding: 25px;
    }
    #portfolio .portfolio-item .portfolio-caption h4 {
      text-transform: none;
      margin: 0;
    }
    #portfolio .portfolio-item .portfolio-caption p {
      font-family: "Droid Serif", "Helvetica Neue", sans-serif;
      font-style: italic;
      font-size: 16px;
      margin: 0;
    }

＆＃13;

<section id="portfolio" class="bg-light-gray">
        <div class="container">
            <div class="row">
              <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Portfolio</h2>
                    <h3 class="section-subheading text-muted">Here I show some of my work.</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                                <p>click for more</p>
                            </div>
                        </div>
                        <img src="img/portfolio/img.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>1st job</h4>
                        <p class="text-muted">Design</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                                <p>click for more</p>
                            </div>
                        </div>
                        <img src="img/portfolio/img2.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>2nd job</h4>
                        <p class="text-muted">Design</p>
                        <br>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                                <p>click for more</p>
                            </div>
                        </div>
                        <img src="img/portfolio/img3.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>3rd job</h4>
                        <p class="text-muted">Design</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                                <p>click for more</p>
                            </div>
                        </div>
                        <img src="img/portfolio/img4.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Beach Tennis Brand</h4>
                        <p class="text-muted">Design</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                                <p>click to watch</p>
                            </div>
                        </div>
                        <img src="img/portfolio/img5.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>NGO "4th job"</h4>
                        <p class="text-muted">Design</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                                <p>click for more</p>
                            </div>
                        </div>
                        <img src="img/portfolio/img6.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Design</h4>
                        <p class="text-muted">5th job</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

＆＃13;

任何帮助表示赞赏！

Answer 1

有一种更好的方法可以做到这一点，但我建议你做的是将img元素包装在div中，如下所示：

<div class="img-wrap"><img src="source.png" class="img-full"></div>

然后你给img-wrap 100％宽度和固定高度让我们说200px带有溢出隐藏

.img-wrap{
width:100%;
height:200px;
overflow:hidden;
background:#cccccc;
}

最后你给img max-height 200px;

.img-full{
max-width:100%;
max-height:200px;
}

它应该做的工作。通过这种方式，您的图像可以保持比例。

Answer 2

您可以使用砌体布局（在谷歌中搜索同位素js）或者您可以为每min-height:300px;max-height:300px;

设置.portfolio-item（例如）

如果您不想使用砖石，请尝试为img添加一个容器：

.image_container{
   width:100%;
   height:300px;
   overflow:hidden;
}

.image_container img{
   max-width:100%;
   height:auto;
}

但您的图片会被裁剪。

如何调整投资组合项目的高度？

2 个答案: