Question

我正在为要建立的图像库创建图像缩略图数组。图像保持其长宽比，并适合平方格。我希望图像与这些父div的TOP对齐，因此在不创建边框的情况下具有视觉连续性。我该怎么办？

我已经尝试过在Aspect-parent和Aspect-fit div上使用vertical-align top，但这是行不通的。

这里是fiddle

有关的CSS：

.aspect-parent {
   width: 140px;
   height: 140px;
   margin: 2px;
   position: relative;
   display: inline-block;
   text-align: center;
   background-color: lightgrey;
}

img.aspect-fit {
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
   height: 100%;
   width: 100%;
}

<div class="thumbnails">
    <!--first image-->
    <div class="aspect-parent">
        <img class="aspect-fit" src="https://www.sheknows.com/wp-content/uploads/2018/08/wpwzggsfqc9bfz2nlnb5.jpeg">
        <div id="thumbCaption">
            <i id="Title">artwork title</i><span>, </span><span id="year">1999</span>
        </div>
    </div>
    <!--second image-->
    <div class="aspect-parent">
        <img class="aspect-fit" src="https://i.pinimg.com/originals/74/ac/64/74ac64e49653dae6b4e593f688ff12f4.jpg">
        <div id="thumbCaption">
            <i id="Title">artwork title</i><span>, </span><span id="year">1900</span>
        </div>
    </div>
    <!--third image-->
    <div class="aspect-parent">
        <img class="aspect-fit" src="https://static1.squarespace.com/static/59ab26c6ff7c50083fca77c3/59ab4fb4cf81e025e872464a/5cf83e726069c90001a2ad5d/1559772921407/sandro_botticelli_-_three_graces_in_primavera_detail.jpg?format=2500w">
        <div id="thumbCaption">
            <i id="Title">artwork title</i><span>, </span><span id="year">1909</span>
        </div>
    </div>
</div>

我希望我需要改变宽高比。

Answer 1

object-position:top;是您的朋友-将其添加到您的.aspect-fit类中：

.aspect-parent {
   width: 140px;
   height: 140px;
   margin: 2px;
   position: relative;
   display: inline-block;
   text-align: center;
   background-color: lightgrey;
}

img.aspect-fit {
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
   object-position:top;
   height: 100%;
   width: 100%;
}

<div class="thumbnails">
    <!--first image-->
    <div class="aspect-parent">
        <img class="aspect-fit" src="https://www.sheknows.com/wp-content/uploads/2018/08/wpwzggsfqc9bfz2nlnb5.jpeg">
        <div id="thumbCaption">
            <i id="Title">artwork title</i><span>, </span><span id="year">1999</span>
        </div>
    </div>
    <!--second image-->
    <div class="aspect-parent">
        <img class="aspect-fit" src="https://i.pinimg.com/originals/74/ac/64/74ac64e49653dae6b4e593f688ff12f4.jpg">
        <div id="thumbCaption">
            <i id="Title">artwork title</i><span>, </span><span id="year">1900</span>
        </div>
    </div>
    <!--third image-->
    <div class="aspect-parent">
        <img class="aspect-fit" src="https://static1.squarespace.com/static/59ab26c6ff7c50083fca77c3/59ab4fb4cf81e025e872464a/5cf83e726069c90001a2ad5d/1559772921407/sandro_botticelli_-_three_graces_in_primavera_detail.jpg?format=2500w">
        <div id="thumbCaption">
            <i id="Title">artwork title</i><span>, </span><span id="year">1909</span>
        </div>
    </div>
</div>

顺便说一下，您周围有很多相同的id点-它们应该是唯一的，请使用类。

如何将动态尺寸的图像对齐到div的顶部？

1 个答案: