Solved

fix image max width and/or height?

Posted on 2012-03-18
4
302 Views
Last Modified: 2012-04-05
I know you can set a image's height and/or width but can you set a max height and width so We a person puts a image my site wont allow it to expand a certain size. I dont' want to set the size because if their image is smaller then my set size I don't want it to stretch?

 <img src="" alt="" (max)width="150"  (max)height="150" border="" />
0
Comment
Question by:overcolor
4 Comments
 
LVL 7

Expert Comment

by:micropc1
ID: 37736200
This isn't possible with the IMG tag, but there are a few ways it can be done... you can put them in a div any apply max-width/height and overflow properties to the div's CSS style, you can resize them at the server on upload, or you can use javascript to resize them on the client side...

See here... http://www.webdeveloper.com/forum/showthread.php?t=118246
0
 
LVL 14

Expert Comment

by:nishant joshi
ID: 37736221
put your img tag with width=100% in to the div of your ficed size this will solve your problem.

Regards,
nishant
0
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
ID: 37749943
Is this what you are trying to accomplish:

<!DOCTYPE html>
<html>
    <head>
    <style>
        .imgrestrain{max-width:300px;max-height:225px;width:auto;height:auto;}
    </style>
    <title>Test</title>
    </head>
    <body>
        Without the added class:<br />
        <a href="http://www.flickr.com/photos/mikebaird/507188808/" 
        title="Great Egret (Ardea alba) on Morro Strand State Beach, CA by mikebaird, on Flickr">
            <img src="http://farm1.staticflickr.com/191/507188808_0341a0d9a5.jpg" 
            width="500" height="333" alt="Great Egret (Ardea alba) on Morro Strand State Beach, CA">
        </a>
        <br />
        With the added class:<br />
        <a href="http://www.flickr.com/photos/mikebaird/507188808/" 
        title="Great Egret (Ardea alba) on Morro Strand State Beach, CA by mikebaird, on Flickr">
            <img class="imgrestrain" src="http://farm1.staticflickr.com/191/507188808_0341a0d9a5.jpg" 
            width="500" height="333" alt="Great Egret (Ardea alba) on Morro Strand State Beach, CA">
        </a>
        <p>Image by "Mike" Michael L. Baird</p>
        <p><a href="http://flickr.bairdphotos.com/">http://flickr.bairdphotos.com/</a></p>
    </body>
</html>

Open in new window

0
 

Author Closing Comment

by:overcolor
ID: 37814612
Perfect thank you
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now