javascript 自动将徽章放置在图像的角落
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6084305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position badge over corner of image automatically
提问by Andrew
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):
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'); }
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.
所以，基本上图像是垂直对齐的中间和文本对齐的中心，它们的最大宽度为 176，最大高度为 158，但它们被裁剪以保持原始纵横比，因此每个图像的实际顶角下降取决于它是哪个图像。
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).
我有一个徽章，我想放在某些图像的顶角（当图像是“规范的”时）。您可以在上面看到此样式 ( 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.
当然，问题是我不知道图像的顶角在哪里，所以我无法通过 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.
我假设我需要通过 jQuery 或其他东西来做到这一点。因此，我开始使用 jQuery 方法来自动将徽章 div 附加到任何规范图像。这很好用，但我不知道如何将它放置在左上角。
How can this be done? (ideally using just HTML and CSS, but realistically using JS/jQuery)
如何才能做到这一点？（理想情况下只使用 HTML 和 CSS，但实际上使用 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:0inside the same container the image is bound by:
--编辑--问题是：图像漂浮在容器内，因此图像的角可能落在容器外部界限内的任何位置。这是一个示例，说明如果我尝试position:absolute; top:0; left:0在图像绑定的同一容器内使用会发生什么：
采纳答案by NGLN
It took some tryouts, but here it is: the size independent image badge positioner.
进行了一些试验，但它是：大小独立的图像徽章定位器。
HTML:
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:
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.
在之前不太成功的尝试中（请参阅编辑历史记录），问题是让图像垂直居中并使其父级具有相同的大小（以便将徽章定位在该父级的左上角）。作为内联元素，父元素不关心其内容的高度，因此仍然很小，但作为块元素，它会延伸到父元素的大小，从而变得很高，请参阅演示小提琴。诀窍似乎是给该父级一个非常小的行高（例如 0）并将其显示为行内块。这样，父母将根据其孩子成长。
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 atag. Haha, how weird!
在 Opera 11、Chrome 11、IE8、IE9、FF4 和 Safari 5 中使用所有 DTD 进行测试。 IE7 失败了，但是照片与徽章在正确位置的中心顶部对齐并没有那么糟糕。现在也适用于 IE7，因为我删除了标记内a标记中的空格。哈哈，好奇怪！
回答by wdm
EDIT3: This solution is very similar to my original solution. I didn't really look at your code much so I should have noticed this earlier. Your atag is already wrapping each image so you can just add the badge in there and position it absolute. The atag doesn't need width/height. Also you must add the badge image at the beginning of your atag.
EDIT3：此解决方案与我的原始解决方案非常相似。我并没有真正看你的代码，所以我应该早点注意到这一点。您的a标签已经包裹了每张图片，因此您可以在其中添加徽章并将其绝对定位。该a标签不需要宽度/高度。此外，您必须在a标签的开头添加徽章图像。
Demo: http://jsfiddle.net/wdm954/czxj2/1/
演示：http: //jsfiddle.net/wdm954/czxj2/1/
div.free_tile {
width: 176px;
height: 206px;
float: left;
}
a.img_container {
display: block;
margin-bottom: 10px;
}
span.transect_badge {
display:block;
position: absolute;
height: 20px;
width: 20px;
background-image: url('/images/transect-badge.png');
}
HTML...
HTML...
<a class="img_container canonical" href="/photos/10">
<span class="transect_badge"></span>
<img class="canonical" src="path/to/img" />
</a>
Other solutions...
其他解决方案...
In my code I'm using SPAN tags so simulate images, but it's the same idea. The badge image, when positioned absolute, will create the desired effect.
在我的代码中，我使用 SPAN 标签来模拟图像，但这是相同的想法。定位后的徽章图像absolute将产生所需的效果。
Demo: http://jsfiddle.net/wdm954/62faE/
演示：http: //jsfiddle.net/wdm954/62faE/
EDIT: In the case that you need jQuery to position. This should work (where .box is your container and .corner is the badge image)...
编辑：在您需要 jQuery 定位的情况下。这应该可以工作（其中 .box 是您的容器，而 .corner 是徽章图像）...
$('.box').each(function() {
$(this).find('.corner')
.css('margin-top', ( $(this).width() - $(this).find('.img').width() ) / 2);
$(this).find('.corner')
.css('margin-left', ( $(this).height() - $(this).find('.img').height() ) / 2);
});
EDIT2: Another solution would be to wrap each image with a new container. You would have to move the code that you use to center each image to the class of the new wrapping container.
EDIT2：另一种解决方案是用新容器包装每个图像。您必须将用于将每个图像居中的代码移动到新包装容器的类中。
Demo: http://jsfiddle.net/wdm954/62faE/1/
演示：http: //jsfiddle.net/wdm954/62faE/1/
$('.img').wrap('<span class="imgwrap" />');
$('.imgwrap').prepend('<span class="badge" />');
Technically you can just add something like this to your HTML though without using jQuery to insert it.
从技术上讲，您可以将类似的内容添加到您的 HTML 中，但无需使用 jQuery 来插入它。
回答by Andrew
I did find one solution using jQuery. I don't preferthis because it noticably impacts page loading, but it is acceptable if nothing else will work. I'm more interested in NGLN's idea which seems promising but I haven't entirely figured out yet. However, since this thread has picked up a lot of traffic I thought I'd post one solution that I came up with for future readers to consider:
我确实使用 jQuery 找到了一种解决方案。我不喜欢这个，因为它会显着影响页面加载，但如果没有其他方法可以工作，这是可以接受的。我对 NGLN 的想法更感兴趣，这似乎很有希望，但我还没有完全弄清楚。但是，由于该线程吸引了大量流量，我想我会发布一个解决方案，供未来的读者考虑：
Given this markup:
鉴于此标记：
<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">
<span class="transect-badge"></span>
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
Same CSS as in question except:
与所讨论的 CSS 相同，除了：
span.transect-badge { display: block; height: 20px; width: 20px; position: absolute; background: url('/images/transect-badge.png'); }
Then this jQuery solves the problem:
然后这个jQuery解决了这个问题：
$(function() {
$('img.canonical').load( function() {
var position = $(this).position();
$(this).next().css({ 'top': position.top+1, 'left': position.left+1 });
});
});
Like I said, though, this incurs noticeable run-time on the client end, so I'd prefer to use a non JS solution if I can. I'll continue to leave this question open while I test out and give feedback on the other solutions offered, with hopes of finding one of them workable without JS.
不过，就像我说的那样，这会在客户端产生明显的运行时间，所以如果可以的话，我更愿意使用非 JS 解决方案。在我测试并提供其他解决方案的反馈时，我将继续让这个问题保持开放，希望找到其中一个在没有 JS 的情况下可行。
回答by Andy E
Use an element other than <div>, e.g. <span>and put it inside your <a>element after the <img>element. Then, give the <a>element position:relative;and the <span>gets position:absolute; top:0px; left:0px;. That is, if you don't mind the badge also being part of the same link - but it's the easiest way. Also, the reason for using <span>is to keep your HTML4 valid, <div>would still be HTML5 valid, however.
使用 , 以外的元素<div>，例如<span>，将其放在<a>元素之后的<img>元素中。然后，给出<a>元素position:relative;和<span>获取position:absolute; top:0px; left:0px;。也就是说，如果您不介意徽章也是同一链接的一部分 - 但这是最简单的方法。此外，使用的原因<span>是为了保持您的 HTML4 有效，<div>但是仍然是 HTML5 有效的。
