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

时间:2010-09-11 03:09:42

标签: javascript iphone css

这是我的困境;我正在开发一个简单的iPhone网站(这是我博客的一个端口)。我有这个问题;为了让我的博客至少看起来不错,我需要在一定大小的每个图像周围放置一个边界,然后将所述图像居中。

该网站的内容实际上是一个RSS提要,显示了一些简单的javascript,并用一些CSS编写。 CSS位是我正在努力解决的问题。任何帮助都会非常感激(我对javascript很新,所以如果你稍微详细说明的话我真的不会感到屈尊)。

1 个答案:

答案 0 :(得分:2)

我会把它分解。 Javascript(使用jQuery完成)将在加载后遍历页面上的每个图像。如果图像的高度或宽度超过300,则会将类“超大”附加到父级。将脚本中的每个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;
}