twitter-bootstrap - 制作 1 :1 scaled image out of tall image without making it wide

Question

我想知道是否可以在 div 中显示图像的宽度匹配部分？我试过使用 width:100%; 之类的东西，但它仍然显示完整的高图像，只是太宽了。我正在使用 4 列 Bootstrap 模板来尝试打印图像。这是我的代码(还有另一个没有用的样式代码..):

echo "<div class='col-md-3 portfolio-item'>";
    echo "<a href='#'>";
        $url = $row['url'];
        echo "<img style='object-fit:contain;max-height:240px;' class='img-responsive' src='".$url."' alt=''>";
    echo "</a>";
echo "</div>";

高图片示例:http://i.imgur.com/ux6PckG.jpg

我希望它如何显示(顶部、底部或中间无关紧要):http://i.imgur.com/Rt5yAOb.png

当前显示方式(右侧的白色方 block ):http://i.imgur.com/H7iGcj4.png

如果我设置了图像 anchor 的max-width和max-height，我可以只显示它的一部分吗(顶部，底部或中间无所谓) ) 而不必自己裁剪缩略图？

很难解释我的问题，对此感到抱歉。我不确定从哪里开始，我的谷歌搜索没有带我到任何地方，可能没有使用正确的术语。

Answer 1

问题是您的 .portfolio-item 因图像而调整了大小。您必须强制使用 1:1 比例的框来限制图像(使用 overflow:hidden)

.portfolio-item.square{position:relative}
.portfolio-item.square:before{
  content:'';
  display:block;
  padding-top:100%;
}
.portfolio-item.square > a{
  display:block;
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class='col-md-3 portfolio-item square'>
      <a href='#'>
        <img style='max-width:100%;' class='img-responsive' src='http://i.imgur.com/ux6PckG.jpg' alt=''>"
      </a>
    </div>
    <div class='col-md-3 portfolio-item square'>
      <a href='#'>
        <img style='max-width:100%;' class='img-responsive' src='http://i.imgur.com/ux6PckG.jpg' alt=''>"
      </a>
    </div>
    <div class='col-md-3 portfolio-item square'>
      <a href='#'>
        <img style='max-width:100%;' class='img-responsive' src='http://i.imgur.com/ux6PckG.jpg' alt=''>"
      </a>
    </div>
    <div class='col-md-3 portfolio-item square'>
      <a href='#'>
        <img style='max-width:100%;' class='img-responsive' src='http://i.imgur.com/ux6PckG.jpg' alt=''>"
      </a>
    </div>
  </div>
</div>

---

更好的方法是将图像设置为 a 标记的背景，这样您就可以控制如何对齐图像(顶部/底部/右侧... ) 通过 background-position:...