?
Solved

fix image max width and/or height?

Posted on 2012-03-18
4
Medium Priority
?
315 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 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

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.
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?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

571 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