自动将徽章放在图像角上

Question

我有一个布局,图像在某个区域内"浮动".布局如下所示:

像这样的来源:

<div class="free_tile">
  <a class="img_container canonical" href="/photos/10">
    <img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
    <!-- EDIT: I am aware that I can put the badge here. See the edit notes and image below. -->
  </a>
  <div class="location">Houston</div>
  <div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>

CSS看起来像这样(在SCSS中):

div.free_tile { width: 176px; height: 206px; float: left; margin: 0 20px 20px 0; position: relative;
  &.last { margin: 0 0 20px 0; }
  a.img_container { display: block; width: 176px; height: 158px; text-align: center; line-height: 156px; margin-bottom: 10px; }
  img { margin: 0; border: 1px solid $dark3; display: inline-block; vertical-align: middle; @include boxShadow;
    &.canonical { border: 1px solid $transect; }
  }
  .location, .taxonomy { width: 176px; }
  .location { font-weight: 700; }
  .taxonomy { line-height: 10px; font-size: 10px; text-transform: uppercase; height: 20px; overflow: hidden; }
}
div.transect_badge { height: 20px; width: 20px; background: url('/images/transect-badge.png'); }

因此,基本上图像位于垂直对齐的中间和文本对齐的中心,它们的最大宽度为176,最大高度为158,但它们被裁剪以保持原始宽高比,因此每个图像的实际顶角根据图像的不同而不同.

我有一个徽章,我想把它放在某些图像的顶角(当图像是"规范"时).你看到上面的风格(div.transect_badge).

当然,问题是我不知道图像的顶角会在哪里,所以我不能通过CSS硬编码位置.

我假设我需要通过jQuery或其他东西来做这件事.所以,我开始使用jQuery方法自动将徽章div附加到任何规范图像.这很好,但我无法弄清楚如何将它放在左上角.

如何才能做到这一点？(理想情况下只使用HTML和CSS,但实际使用JS/jQuery)

--EDIT--问题在于:图像浮在容器内部,因此图像的角落可能落在容器外部的任何位置.这是一个例子,如果我尝试position:absolute; top:0; left:0在图像绑定的同一容器内使用会发生什么:

Answer 1

它需要一些试用,但这里是:尺寸独立的图像徽章定位器.

HTML:

<div class="tile">
    <span class="photo">
        <a href=""><img src="/photos/10.jpg" alt="10" /><ins></ins></a>
    </span>
    <p class="location">Houston</p>
    <p class="taxonomy">T6 | Conduit | Infrastructure</p>        
</div>

CSS:

.tile {
    float: left;
    width: 176px;
    height: 206px;
    margin: 0 20px 20px 0;
 }
.photo {
    display: block;
    width: 176px;
    height: 158px;
    text-align: center;
    line-height: 158px;
    margin-bottom: 10px;
}
a {
    display: inline-block;
    position: relative;
    line-height: 0;
}
img {
    border: none;
    vertical-align: middle;
}
ins {
    background: url('/images/badge.png') no-repeat 0 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
}

例:

在以前不太成功的尝试中(参见编辑历史),问题是使图像垂直居中,以使其父级具有相同的大小(以便将徽章定位在该父级的左上角).作为内联元素,父母不关心其内容的高度,因此保持小,但作为块元素,它延伸到h的父母的大小,因此得到高,见示范小提琴.诀窍似乎是给父母一个非常小的行高(例如0)并将其显示为内联块.这样,父母将根据其孩子成长.

使用所有DTD测试Opera 11,Chrome 11,IE8,IE9,FF4和Safari 5. IE7失败了,但是照片的中心对齐与徽章在正确的位置并没有那么糟糕.现在也适用于IE7,因为我删除了标记内a标记中的空格.哈哈,多奇怪啊!