CODEWITHSUNDEEP
javascriptjquerycss
Haren Sarma
Haren Sarma

Reputation: 2553

CSS or HTML help to set maximum width , height of a Image

I have a block in a table, where profile pictures of the users shows. but to maintain design space, I have made the block size 200px in width and 300px in height. Now I set the below CSS style on the pictures of the users:

.max{
max-width:200px;
max-height:300px;
}

If there is a large picture (suppose 300x400 px), then it re-sizes to 200x300 px (well doing). But my problem is that if there is a small picture (suppose 100x150px), then also it re-sizes it to 200x300px. But I want to set maximum width and height. So in my situation I want to display the original size of the pictures if it is smaller then 200x300px . But if it is large picture, then it will re-size to 200x300px. any help plz (how I can do it ?)... --(internet explorer 8.0 tested)

If it cannot do in css, html is there any option to do in JavaScript ?. Is there any good source available ?

Upvotes: 2

Views: 2816

Answers (6)

vector
vector

Reputation: 7566

... you might have to resort to javascript, if I understand your question correctly something like this might do it:

$(document).ready( function(){

$('img').each( function(){
    if(  ($(this).width() < 200) && ( $(this).height() < 300 ) ){
        $(this).css({'width' : $(this).width() +'px', 'height' : $(this).height() + 'px' )          
    }
})

})

... this would involve jQuery, didn't have a chance to test either.

Upvotes: 0

Mauro Morales
Mauro Morales

Reputation: 1677

don't know much about css but this should do it in jquery

$('.images_class').each(function(){
  height = $(this).height();
  width = $(this).width();
  if( height > 200 || width > 300)
    $(this).css('height','200px').css('width','300px');
});

Upvotes: 0

Bala
Bala

Reputation: 691

.max{
    height: auto;
    max-width: 100%;
}

Specify td width to 200px and for the table - table-layout:fixed.

That should solve your problem

Upvotes: 2

Guilhem Hoffmann
Guilhem Hoffmann

Reputation: 962

You can use:

 .max  {
    max-width: expression(this.width > 200 ? 200: true);
}

Upvotes: 0

Zack Burruel
Zack Burruel

Reputation: 3

Max width and height are just that.. a max, so, it shouldn't be affecting the smaller images.

I just made a text html page and the smaller images worked fine with the max height and width set.

Upvotes: 0

Guard
Guard

Reputation: 6955

What you are saying is extremely strange.

It sounds like actually you are setting width and height rather than max-*.

I suggest you create a simple fiddle and see if the problem remains. If yes, then post a URL and I can look into it.

Upvotes: -1

Related Questions