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>

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?

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

回答1:

You can consider doing this in CSS. Have a no-image like this:

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

Now for all the images, give this CSS:

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

So, this way, the images to be loaded will show No Image and then those with no image, show this. :) DeviantArt uses the same technique. Do check this out.

回答2:

You can try:

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

回答3:

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" />

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?

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

来源：https://stackoverflow.com/questions/14788608/image-size-via-css

标签

css

image

responsive-design