HTML/CSS/Images/image

Материал из Web эксперт
Перейти к: навигация, поиск

Adding images and alt message with XHTML

 
<?xml version = "1.0"?>
<!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">
   <head>
      <title>Internet and WWW How to Program - Welcome</title>
   </head>
   <body>
      <p><img src = "http://www.wbex.ru/style/logo.png" height = "238" width = "183" alt = "If no image, display me" />
         <img src = "http://www.wbex.ru/style/logo.png" height = "238" width = "183" alt = "alt message" />
      </p>
   </body>
</html>



Alternative Text Rendering

 

<HTML>
<HEAD>
  <TITLE>Alternative Text Rendering</TITLE>
</HEAD>
<BODY>
<IMG SRC="http://www.wbex.ru/style/logo.png" WIDTH=234 HEIGHT="150" BORDER="0" ALT="This is a photo.">
</BODY>
</HTML>



CSS Image Border

 


<html>
<head>
  <title>CSS Image Border</title>
  <style type="text/css">
    body{
        margin-left: .50in; 
        margin-top: .50in;
         color: white
    }
    img{
        border-color: white;
         border-style: inset;
      border-width: thick;
      }
  </style>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" alt="Java" height="300" width="240" />
</body>
</html>



display block

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title></title>
<style type="text/css">
img {
  width: 300px;
  border: 6px double #666;
  background: #fff;
  padding: 4px;
  display:block;
}
a:link {
  display:block;
}
a:hover img {
  border-style: solid;
  background: #999;
}
</style>
    </head>
    <body>
<a href="http://www.www.wbex.ru"><img src="http://www.wbex.ru/style/logo.png" alt="Face" /></a>
    </body>
</html>



Image block

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
img {
  display: block;
  width: auto;
  height: auto;
}
</style>
</head>
<body>
    <img width="742" height="556" src="http://www.wbex.ru/style/logo.png" alt="" /> 
</body>
</html>



Image float: left

 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>A table of hcards</title>
<style type="text/css">
img {
  border: 1px solid black;
  float: left;
  margin-right: 5px;
}
</style>
</head>
<body>
<p class="vcard"><img src="http://www.wbex.ru/style/logo.png" alt="" class="photo" />
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. </p>
</body>
</html>



Image vertical align 20px

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type="text/css">
        p {
          font-family: sans-serif;
            width: 200px;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
            font-size: 16px;
        }
        img {
            vertical-align: 20px;
        }
            </style>
        </head>
        <body>
          <p>
          The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically 20 pixels from the baseline.
      </p>
        </body>
    </html>



Image with fixed 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 rel="stylesheet" type="text/css">
img#fixed {
    border: 1px solid black;
    margin: 5px;
    width: 200px;
    height: 200px;
}
        </style>
    </head>
    <body>
        <div>
           <img src="http://www.wbex.ru/style/logo.png" id="fixed" />
        </div>
    </body>
</html>



<img> in a
with class

 
<!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">
<head>
<title></title>
<style type="text/css">
div.imgholder {
 float:left; 
 margin: 10px 0 0 5px; 
}
div.imgholder img { 
 display: block; 
 position: relative; 
 background-color: #fff; 
 border: 1px solid #666;
 margin: -3px 5px 5px -3px; 
 padding: 2px; 
}
</style>
</head>
<body>
  <div class="imgholder"> 
   <img src="http://www.wbex.ru/style/logo.png" alt="" /> 
  </div> 
</body>
</html>



Remove border from an image

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title></title>
<style type="text/css">
a img {
  width: 300px;
  border: 0;
  display: block;
}
</style>
    </head>
    <body>
<a href=""><img src="http://www.wbex.ru/style/logo.png" /></a>
    </body>
</html>



Set background to #fff for an image

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title></title>
<style type="text/css">
img {
  width: 300px;
  border: 6px double #666;
  background: #fff;
  padding: 4px;
  display:block;
}
a:link {
  display:block;
}
a:hover img {
  border-style: solid;
  background: #999;
}
</style>
    </head>
    <body>
<a href="http://www.www.wbex.ru"><img src="http://www.wbex.ru/style/logo.png" alt="Face" /></a>
    </body>
</html>



Set border to "6px double #666" for an image

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title></title>
<style type="text/css">
img {
  width: 300px;
  border: 6px double #666;
  background: #fff;
  padding: 4px;
  display:block;
}
a:link {
  display:block;
}
a:hover img {
  border-style: solid;
  background: #999;
}
</style>
    </head>
    <body>
<a href="http://www.www.wbex.ru"><img src="http://www.wbex.ru/style/logo.png" alt="Face" /></a>
    </body>
</html>



Set image margin top and left to negative value

 
<!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">
<head>
<title></title>
<style type="text/css">
img {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -96px;
 margin-left: -138px;
 height: 192px;
 width: 256px;
}
</style>
</head>
<body>
  <img src="http://www.wbex.ru/style/logo.png" width="256" height="192" alt="Photo">
  
</body>
</html>



Set padding to 4px

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title></title>
<style type="text/css">
img {
  width: 300px;
  border: 6px double #666;
  background: #fff;
  padding: 4px;
  display:block;
}
a:link {
  display:block;
}
a:hover img {
  border-style: solid;
  background: #999;
  }
</style>
    </head>
    <body>
<a href="http://www.www.wbex.ru"><img src="http://www.wbex.ru/style/logo.png" alt="Face" /></a>
    </body>
</html>



Set width for an image

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title></title>
<style type="text/css">
img {
  width: 300px;
  border: 6px double #666;
  background: #fff;
  padding: 4px;
  display:block;
}
a:link {
  display:block;
}
a:hover img {
  border-style: solid;
  background: #999;
}
</style>
    </head>
    <body>
<a href="http://www.www.wbex.ru"><img src="http://www.wbex.ru/style/logo.png" alt="Face" /></a>
    </body>
</html>



Shrinkwrapped image by setting both width and height to auto

 
<!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">
<head>
<title></title>
<style type="text/css">
#star {
  width: auto;
  height: auto;
  background: black;
}

</style>
</head>
<body>
  <img id="star" src="http://www.wbex.ru/style/logo.png" alt="star" /> 
</body>
</html>



Stretched Image by setting both width and height to 100%

 
<!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">
<head>
<title></title>
<style type="text/css">
#star {
  width: 100%;
  height: 100%;
  background: blue;
}
</style>
</head>
<body>
    <img id="star" src="http://www.wbex.ru/style/logo.png" alt="star"/>
</body>
</html>



vertical align 100 percent image

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type="text/css">
        p {
          font-family: sans-serif;
            width: 200px;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
            font-size: 16px;
        }
        img {
            vertical-align: 100%;
        }
            </style>
        </head>
        <body>
           <p>
          The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically 100% of the height of the line it appears on.
      </p>
        </body>
    </html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Images/image&oldid=5115»