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 似乎“height：auto”重置或忽略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;}

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

Answer 2

您可以尝试：

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

Answer 3

如果我没有误解你的问题，我想你可以尝试使用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中写入宽度和高度的内联样式css，它不应该在你写的大小数量之后添加'px'吗？

对于一些更有用的文档，您可以浏览 http://www.w3schools.com ：）

通过CSS的图像大小

3 个答案: