CODEWITHSUNDEEP
css
user2644743
user2644743

Reputation: 225

Image fill is not working properly

This is my html code

<div class="feature-image">
    <a class="featured_image_link" href="#">
        <img src="1.jpg">
    </a>                    
</div>

My image 1.jpg size is 150px x 150px and i have mentioned in the css as

.feature-image{
    width:150px;
    height:150px;
    display:block; 
    position:relative;
    overflow:hidden;
}

.feature-image img{
    position:absolute; 
    top:-50; 
    left:0; 
    width:100%;
}

I know that when i give different image size (for eg: 300x200 or 600x350 etc) the image will fill inside that 150x150 and not stretches.

But actually its not working properly. Please help whether there is any mistake in this code?

Upvotes: 3

Views: 167

Answers (2)

MarsOne
MarsOne

Reputation: 2186

Ok. Let me explain how this work.

First things first. Your CSS has a bug. 

top:-50;

This wont do anything. It has to be something like 

top:-50px;

But my question is why do you want negative margins? it will only hide you image by 50 pixels on the top side.

Ok, now coming to the real issue. You say you have no problems when your Image is 150X150 pixels. Thats because the parent <div> is 150x150. But if you have a different image size like 300x200 you have a problem.

This happens because in your CSS you have only mentioned width: 100% for the image.From here on its plain math.

The width=300 & height =200 Since you have mentioned width:100% the image automatically gets adjusted to the new width

300(original width)/150(new width)=2

So taking the same factor of 2
200(original height)/2=100(new height)

Hence you rendered image will have height of 100px.

if you want the rendered image to have same height of div just add this line to img CSS

height: 100%;

Working fiddle

Upvotes: 2

vzeke
vzeke

Reputation: 111

from the code you have pasted, it's working properly. Are you able to link to the site where this is live and not working? Cache issue?

See jsfiddle: http://jsfiddle.net/FNQZn/ 

.feature-image {
    width:150px;
    height:150px;
    display:block;
    position:relative;
    overflow:hidden;
}
.feature-image img {
    position:absolute;
    top:-50;
    left:0;
    width:100%;
}

Upvotes: -1

Related Questions