Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

fix image max width and/or height?

Posted on 2012-03-18
4
Medium Priority
?
314 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 2000 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

609 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