Solved

fix image max width and/or height?

Posted on 2012-03-18
4
307 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 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
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…

732 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