Solved

fix image max width and/or height?

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

Industry Leaders: 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

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…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

691 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