javascript - 将某些 CSS 应用于指定大小的图像

Question

这是我的困境；我正在开发一个简单的 iPhone 网站(这是我博客的一个端口)。我有这个问题；为了让我的博客至少看起来不错，我需要在每个超过一定尺寸的图像周围放置一个边框，然后将这些图像居中。

该站点的内容实际上是一个 RSS 提要，使用一些简单的 javascript 和一些 CSS 来显示。 CSS 位是我现在正在尝试的工作。任何帮助将不胜感激(我是 javascript 的新手，所以如果您稍微详细说明，我真的不会觉得居高临下)。

Answer 1

我会分解的。加载后，Javascript(使用 jQuery 完成)将遍历页面上的每个图像。如果图像的高度或宽度超过 300，它会将“oversized”类附加到父级。将脚本中的每个 300 实例更改为您认为过大的值。

CSS 基本上只包含 text-align:center;使图像在 <div> 中居中然后是图像的边框。

Try the Fiddle

Javascript

$(document).ready(function() {
    $('img').each(function(e) {
        if (($(this).height() > 300) || ($(this).width() > 300)) {
            $(this).parent().addClass('oversized');
        }
    });
});​

CSS

.oversized { /* make the image align to center */
    text-align: center;
}
.oversized * { /* Anything in the oversized div will have a border (the image) */
    border: 1px solid black;
}