0

我在下面有一个响应站点的这些行，
当没有图像时，我需要放置“无图像”类， 

<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 操作来解决：我的解决方案，谢谢您的建议！

4

3 回答 3

0

如果我没有误解您的问题，我认为您可以尝试使用 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 :)

于 2013-04-06T06:22:13.480 回答
0

你可以试试：

.column img.no-image {
    background:red url(image-pending.jpg) no-repeat center ";
    height:385px;
}
于 2013-02-09T13:27:34.397 回答
0

您可以考虑在 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使用相同的技术。一定要检查一下。

于 2013-02-09T13:24:14.060 回答