1

我正在创建一个响应式画廊，我的客户向我发送了横向和纵向以及不同尺寸的图像。

我正在尝试创建一种方法来获取内联图像并通过使用 css 保持纵横比相同。

这是我创建的代码笔的链接。请随时编辑。

http://codepen.io/daugaard47/pen/mpado

框内的图像是 3137 x 4012 我想要做的是通过使用类 max-img-border 将图像宽度保持在 grid_3 内的 100%。

然后我希望高度保持相同的纵横比，所以图像不会被压扁，而是隐藏。因此，例如树的顶部将被类 max-img-border 中的 overflow:hidden 命令隐藏。

我将如何实现这一目标？

另外，如果你能做到这一点，有没有办法添加位置：中心中心？

如果您不想看代码笔，这里是代码。

HTML

<body>

<div class="tree">

  <div class="grid_3">
    <a class="fancybox" rel="gallery1" href="http://upload.wikimedia.org/wikipedia/commons/f/fe/Tree_at_Golf_Course.JPG" title="Tree removal">
      <img src="http://upload.wikimedia.org/wikipedia/commons/f/fe/Tree_at_Golf_Course.JPG" alt="Tree removal" class="max-img-border">
    </a>
    <h5>Tree Removal</h5>
  </div>

</div>

</body>

这是CSS

CSS

body{
    background-color:#1f1f1f;
}

.tree{
    margin:150px auto;
}

.grid_3 {
    width:260px;
    margin:0 20px;
    float:left;
    display:inline;
}

.max-img-border {
    width:100%;
    height:auto;
    max-height:180px;
    border:solid 2px #FFFFFF;
    margin-bottom:10px;
    overflow:hidden;
    display:inline-block; 
}

h5 {
    margin:0 0 10px 0;
    padding:0;
    font-size:17px;
    line-height:19px;
    color:#FFFFFF;
    font-weight:700;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.75);
    text-align:center;
}
4

1 回答 1

1

您可以使用垂直对齐和负边距来虚拟降低图像的高度。

http://codepen.io/gcyrillus/pen/Grbxg

.grid_3 {
    width:260px;
    margin:0 20px;
    float:left;
    text-align:center;
    overflow:hidden;
    background:rgba(255,255,255,0.02);
}

.grid_3 a {
  display:block;  
  height:171px; border:solid 2px #FFFFFF;
  line-height:168px;
  overflow:hidden;
  margin-bottom:10px;
}

.max-img-border {
    width:100%;
    margin:-100% 0;
    vertical-align:middle;
}
于 2013-07-12T20:42:45.747 回答