How can i Automaticaly fixed the size of an image?

Question

0.00/5 (No votes)

See more:

Dear friends,

I am uploading a image and showing it to a fixed size(width='728' height='286')image box but images are not showing correctly as the actual image , even the large images seen faded or distort ,
is there any function or any property or something like this by which i can show a proper image in the image box.

If yes then pls share any link or your suggestion to do this,
This the code what i am using

PHP

<div class="profile-page-fimlay-banner"><?php echo "<a class='fancybox' href='pic/".$family_photo."' data-fancybox-group='gallery'>";?> <?php echo "<img src='pic/".$family_photo."' width='728' height='286' border='0' />" ."</a>";?>
</div>

thanks

Posted 10-Oct-12 23:31pm

Rajeshkrathor

Updated 11-Oct-12 0:02am

v2

Add a Solution

Comments

enhzflep 11-Oct-12 5:37am

Rather than setting both dimensions, just set one of them. This way your images will stay the same shape and won't exhibit aspect-ratio distortions.

I generally fix the height, since it's less disruptive to the page layout to have images of varying widths than it is to have different heights, but as always, your mileage may vary.

[no name] 11-Oct-12 6:03am

Thanks
But if the width will more it will out of box (div).
And if less then the remaining side will be shown blank.

enhzflep 11-Oct-12 7:19am

No worries. In that case, you'll get a better answer if you show a small, but complete and functioning example of your code.

You could edit your question to include it, or better yet - use JsFiddle

Here's an example of using jsFiddle: JsFiddle sample

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peeyush Pachaori · Answer 1 · 2012-10-11T04:58:00

Try given below plug in

http://www.garralab.com/nailthumb.php[^]

On your web page use like code given below:

C#

jQuery('.ImageClass').imgpreload({
            each: function () {
                $(this).nailthumb({
                    height: 115,
                    width: 115,
                    preload: false,
                    method: 'resize',
                    fitDirection: 'left',
                    replaceAnimation: 'no animate',
                    maxEnlargement: 1
                });
            },
            all: function () {
            }
        });

Here 'ImageClass' is the class applied on . Just also add 'display:none' as style for the same .