Image auto width and height : img width « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. img width

Image auto width and height

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>auto width and height</title>
<style type='text/css'>
img {
    border: 1px solid black;
    margin: 5px;
}
img#x-aspect-1 {
    width: 200px;
    height: auto;
}
img#x-aspect-2 {
    width: 150px;
    height: auto;
}
img#x-aspect-3 {
    width: 100px;
    height: auto;
}
img#fixed {
    width: 200px;
    height: 200px;
}
img#y-aspect-1 {
    width: auto;
    height: 200px;
}
img#y-aspect-2 {
    width: auto;
    height: 150px;
}
img#y-aspect-3 {
    width: auto;
    height: 100px;
}
</style>


    </head>
    <body>
        <div>
            <img src='http://java2s.com/style/logo.png' />
            <img src='http://java2s.com/style/logo.png' id='x-aspect-1' />
            <img src='http://java2s.com/style/logo.png' id='x-aspect-2' />
            <img src='http://java2s.com/style/logo.png' id='x-aspect-3' />
        </div>
        <div>
            <img src='http://java2s.com/style/logo.png' id='fixed' />
            <img src='http://java2s.com/style/logo.png' id='y-aspect-1' />
            <img src='http://java2s.com/style/logo.png'
                 id='y-aspect-2' />
            <img src='http://java2s.com/style/logo.png'
                 id='y-aspect-3' />
        </div>
    </body>
</html>








Related examples in the same category

1.Set width for an image
2.Image with fixed width and height
3.Shrinkwrapped image by setting both width and height to auto
4.Stretched Image by setting both width and height to 100%
5.'units' defines the units by which the height and width attributes are measured