通过CSS的图像大小 [英] Image Size via CSS

问题描述

我在下面的这一行有一个代理网站，

我需要在没有图像时放入无图像类，

I have this lines below for a reponsive site,
I need to put "no-image" class when there is 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 。

似乎height：auto重置或忽略HTML定义的大小（275x385），

这是 jsfiddle 用于检查，

如何使其适合第一张图像 JS ？

The problem is Blank image always shown as square;
Because of natural sizes of blank.png is 1x1.
It seems "height:auto" reset or ignore HTML defined sizes (275x385),
Here is a jsfiddle for examine,
How to fit it like first image without JS?

编辑：我认为只有使用JS操作才能解决这个问题：我的解决方案，感谢您提供以下建议！

I think This can be solved only with JS manipulations: My solution, Thank you for advices below!

推荐答案

如果我没有误解你的问题，我想你可以尝试使用css属性background-size。

If i'm not misunderstanding your question, i think you can try using css property 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'吗？

if you still have to write the inline style css of width&height inside the at html, doesn't it supposed to add the 'px' after the number of size you write?

对于一些更有用的文档，你可以进入 http://www.w3schools.com ：）

for some more useful documentation, you can surf into http://www.w3schools.com :)

这篇关于通过CSS的图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！