Question

嘿，以下是我的HTML代码和CSS。如果用户没有在文章中上传图片，我不想在图片上显示边框。现在我的代码在html文件中没有硬编码，这就是为什么图像标签也会显示每篇短文。如果有些文章没有图片边框仍然显示，因为我有它的风格。如果用户没有上传任何图片，我不想显示边框。我怎样才能使用jquery实现这一点。任何想法。

<div class="ShortAticle">
    <div class="ShortArticlePicture">
        <a href="#"> <img alt="Title" src="/images/viewimage.aspx?id=ArticlePicture" /></a>
    </div>
    <div class="ArticleText">
        <h3>Title</h3>
    </div>
</div>

CSS：

.ShortArticlePicture img {
    border: 1px solid #cccc;
}

Answer 1

尝试以下样式，仅当src属性存在时才会显示边框

.ShortArticlePicture img[src] {
    border: 1px solid #cccc;
}

Answer 2

您必须使用JavaScript才能实现此目的。其中一种方法如下所示：

$(window).load(function(){ //Run on load
    $('img').each(function(){ //Loop through each image
        var $this = $(this);
        if($this.height() == 0 || $this.width() == 0){ //If the image has no size
            $this.css('border', 'none'); // Example: Setting border to none
        }
    }
}

另一种方法是在文章的图像中添加特定的class，并为该图像指定border属性。

根据具体情况，我建议您为图片使用固定尺寸，以免用户对布局不一致感到困惑。

如果图像可用则显示边框，否则不显示边框

2 个答案: