通过 CSS 的图像大小

Question

我在下面的这行代码是一个响应式网站，
没有图片的时候需要放“no-image”类，

<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 属性 background-size 。

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

    <img id="second" class="no-image" src="blank-1x1.png" />

如果你还得在at html里面写width&height的内联样式css，是不是应该在你写的size后面加上'px'？

如需更多有用的文档，您可以浏览 http://www.w3schools.com :)

Answer 2

你可以试试：

.column img.no-image {
    background:red url(image-pending.jpg) no-repeat center ";
    height:385px;
}

Answer 3

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

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

现在对于所有图像，给出这个 CSS：

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

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