将图片的角落上的徽章自动定位 [英] Position badge over corner of image automatically

问题描述

我有一个布局，其中图像浮动在某个区域内。布局如下所示：

源代码如下：

 < div class =free_tile > 
< a class =img_container canonicalhref =/ photos / 10> 
< img class =canonicalsrc =http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025alt =Andrew_burleson_10_tile> 
<！ - 编辑：我知道我可以把徽章在这里。请参阅下面的编辑注释和图片。 - > 
< / a> 
< div class =location>休斯顿< / div> 
< div class =taxonomy> T6 |管道|基础设施< / div> 
< / div> 
  

CSS看起来像这样（在SCSS中）：

  div.free_tile {width：176px; height：206px; float：left; margin：0 20px 20px 0;位置：相对; 
& .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 在同一个容器内映像被绑定：

解决方案

它需要一些测试，但这里是：。诀窍似乎是给父亲一个非常小的行高（例如0），并将其显示为内联块。

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

I have a layout where images "float" within a certain area. The layout looks like this:

The source like this:

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

The CSS looks like this (in 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'); }

So, basically the images are sitting vertically-aligned middle and text-aligned center, and they have a maximum width of 176 and max height of 158, but they're cropped to maintain the original aspect ratio so the actual top corner of each image falls differently depending on which image it is.

I have a badge that I'd like to put in the top corner of certain images (when the image is "canonical"). You see the style for this above (div.transect_badge).

The problem, of course, is I don't know where the top corner of the image will be so I can't hardcode the position via CSS.

I assume that I'll need to do this via jQuery or something. So, I started with a jQuery method to automatically append the badge div to any canonical images. That works fine, but I can't figure out how to position it over the top left corner.

How can this be done? (ideally using just HTML and CSS, but realistically using JS/jQuery)

--EDIT-- Here's the problem: The image is floating inside a container, so the corner of the image might fall anywhere inside the outer limits of the container. Here's an example of what happens if I try to use position:absolute; top:0; left:0 inside the same container the image is bound by:

解决方案

It took some tryouts, but here it is: 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;
}

Example:

In previous less successful attempts (see edit history), the problem was getting the image vertically centered ánd to get its parent the same size (in order to position the badge in the top-left of that parent). As inline element that parent doesn't care about the height of its contents and thus remains to small, but as block element it stretches to hís parent's size and thus got to high, see demonstration fiddle. The trick seems to be to give that parent a very small line-height (e.g. 0) and display it as an inline-block. That way the parent will grow according to its childs.

Tested in Opera 11, Chrome 11, IE8, IE9, FF4 and Safari 5 with all DTD's. IE7 fails, but a center-top alignment of the photo with badge at the right position isn't that bad at all. Works also for IE7 now because I deleted the spaces in the markup within the a tag. Haha, how weird!

这篇关于将图片的角落上的徽章自动定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！