css - 图像大小通过 CSS

Question

我在响应式网站下面有这几行，
当没有图像时，我需要放置“无图像”类，

<div class="row">
    <div class="column">
        <img id="first" width=275 height=385 src="flower-275x385.jpg" />
        <img id="second" width=275 height=385 class="no-image" src="blank-1x1.png" />
    </div>
</div>

<style>
    .row {
        width:400px ;
    }
    .column {
        width:50% ;
    }

    .column img {
        width:100% ;
        height:auto ;
    }

    .column img.no-image {
        background:red url(image-pending.jpg) no-repeat center ;
    }
</style>

问题是空白图像总是显示为正方形；
因为 blank.png 的自然大小是 1x1。
似乎“高度:自动”重置或忽略 HTML 定义的大小 (275x385)，
这是一个 jsfiddle用于检查，
如何像第一张图片一样没有JS？

编辑: 我认为这只能通过 JS 操作来解决:My solution , 谢谢楼下指教!

Answer 1

您可以考虑在 CSS 中执行此操作。有一个像这样的无图像:

http://www.mnit.ac.in/new/PortalProfile/images/faculty/noimage.jpg

现在为所有图像提供以下 CSS:

img {background: url("no-image.png") no-repeat center center transparent;}

所以，这样，要加载的图像将显示无图像，然后那些没有图像的显示此图像。 :) DeviantArt使用相同的技术。请检查一下。