Question

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

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

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

我尝试了几种不同的方法，没有达到预期的效果。在图像元素上应用最大高度会略微扭曲较高的图像。我在包装器div上尝试了max-height with overflow：hidden，但这并没有限制图像元素。

我也将max-height应用于该mainImage div，而几乎也可以。但是，正如您在CSS中看到的那样，我使用背景颜色和填充来创建图像周围的边框。在主div上设置max-height会强制图像元素的底部边框位于主div之外。我也尝试将边框应用于mainImage，但仍然没有出现底部边框。最后，如果将最大高度应用于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;
    }

Answer 1

所以，似乎我想通过css实现上述目标。我结束了实现phpThumb并使用z-crop参数裁剪超出中心某一高度的图像。适用于大多数情况。我遇到的唯一问题就是，由于这是一个包含水印图像的摄影网站，有时作物会以尴尬的方式切断水印。

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

1 个答案: