javascript - 自动将徽章定位在图像的 Angular 上

标签 javascript jquery html css position

我有一个布局,其中图像在特定区域内“ float ”。布局如下所示:

Layout Example

来源是这样的:

<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,但它们被裁剪以保持原始纵横比,因此实际的顶 Angular 每张图片的落差取决于它是哪张图片。

我有一个徽章,我想将其放在某些图像的上 Angular (当图像是“规范的”时)。您会在上面看到此样式 (div.transect_badge)。

当然,问题是我不知道图像的顶 Angular 在哪里,所以我不能通过 CSS 对该位置进行硬编码。

我假设我需要通过 jQuery 或其他工具来完成此操作。因此,我开始使用 jQuery 方法自动将徽章 div 附加到任何规范图像。这很好用,但我不知道如何将它放在左上角。

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

--编辑-- 问题在于:图像漂浮在容器内,因此图像的 Angular 可能落在容器外部限制内的任何位置。这是一个示例,说明如果我尝试使用 position:absolute; 会发生什么;顶部:0; left:0 在同一个容器内图像被绑定(bind): The problem

最佳答案

它进行了一些尝试,但这里是:the size independent image badge positioner

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;
}

例子:

在以前不太成功的尝试中(参见编辑历史),问题在于使图像垂直居中并使其父级大小相同(以便将徽章定位在该父级的左上角)。作为内联元素,父元素不关心其内容的高度,因此保持很小,但作为 block 元素,它延伸到他父元素的大小,因此变高,参见 demonstration fiddle 。诀窍似乎是给父级一个非常小的行高(例如 0)并将其显示为内联 block 。这样 parent 就会根据 child 的成长。

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

关于javascript - 自动将徽章定位在图像的 Angular 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6084305/

相关文章:

javascript - 如何在单个导航页面中更改 Logo 图像

javascript - 有没有办法使页面内的所有链接平滑滚动?

javascript - 如何停止 "setInterval"

javascript - '未捕获类型错误 : undefined is not a function' keeps showing up for different lines of code

javascript - HTML Canvas 线条透明度不适用于移动 Safari

jquery - 移动设备的时间选择器

html - 右对齐两个 flex 容器

javascript - 如何确保 `has` 或 `Map` javascript 集合的 `Set` 方法按属性值比较对象?

javascript - Gulpfile.js 请求

javascript - 从另一个 JSON 对象创建 JSON 对象