相对宽度div内可变高度元素的解决方案答案

【问题标题】：Solution for variable height elements within relative width div相对宽度div内可变高度元素的解决方案
【发布时间】：2013-12-16 05:30:05
【问题描述】：

作为响应式页面设计的一部分，我将图像放置在相对宽度的 div 中。设置 div 的宽度（以及图像的大小）以确保其下方的内容显示在屏幕上的折叠上方，直至达到一定的分辨率。

此处显示的少数图片具有不同的尺寸（例如 4x5 格式与 4x6 格式）。这些较高的图像将其下方的内容推到了折叠下方。

我想保持 div 的高度为 4x6 维度，它代表了大多数图像，这样当此处出现 alt 格式的图像时，图像的顶部和底部被均匀裁剪。

我尝试了几种不同的方法，但都没有达到预期的效果。在图像元素上应用最大高度会使较高的图像略微失真。我在包装 div 上尝试使用溢出：隐藏的 max-height，但这并没有限制图像元素。

我也将 max-height 应用于该 mainImage div，这几乎有效。但是，正如您从 CSS 中看到的那样，我使用背景颜色和填充来创建图像周围的边框。在主 div 上设置 max-height 会强制图像元素的底部边框在主 div 之外。我也尝试将边框应用于mainImage，但底部边框仍然没有出现。最后，将 max-height 应用于 div 而不是图像，图像不会在 div 内垂直居中。

我不确定如何实现我所追求的，或者是否可以在响应式设计中实现（即没有固定高度）。有什么想法吗？

这是 HTML：

<wrapper>

  <header></header>

  <content>

<!--the main image -->

    <section>

      <div id="mainImage" role="main">

        <div class="in mainImageWrapper">

          <img src="[IMAGEFILE]" />

        </div><!--end mainImageWrapper -->

      </div><!--end mainImage-->

    </section>

<!-- more content -->

  </content>    

</wrapper>

这是 CSS：

#wrapper {
        width: 100%;
        min-height:100%;
        height: auto !important;
        height:100%;
        border: none;
    }

#content {
        margin: 0 auto;
        width: 90%; 
        max-width: 980px;
    }

#mainImage {
        margin: 1% auto 3% auto;
        width: 100%;
        overflow: hidden;
    }

.mainImageWrapper {
        width: 100%;
        max-height: 634px; /* The aforementioned fix that doesn't provide the desired effect */
        overflow:hidden;
        margin: 0 auto;
        padding: 0;
        display: table-cell;
        text-align: center;
        position: relative;
    }

#mainImage img {
        width: 97%;
        padding: 1.5%;
        background: #FFFFFF;
        margin: auto;
        vertical-align: middle;
        -moz-box-shadow: 1px 2px 8px #1A1A1A;
        -webkit-box-shadow: 1px 2px 8px #1A1A1A;
        box-shadow: 1px 2px 8px #1A1A1A;
    }

【问题讨论】：

标签： css responsive-design height

【解决方案1】：

所以，我想通过 css 完成上面的任务似乎是不可能的。我最终实现了 phpThumb 并使用 z-crop 参数来裁剪距中心超过一定高度的图像。适用于大多数情况。我使用这种方法遇到的唯一问题是，由于这是一个包含水印图像的摄影网站，因此有时裁剪会以一种尴尬的方式切断水印。

【讨论】：