HTML/CSS/Images/image
Содержание
- 1 Adding images and alt message with XHTML
- 2 Alternative Text Rendering
- 3 CSS Image Border
- 4 display block
- 5 Image block
- 6 Image float: left
- 7 Image vertical align 20px
- 8 Image with fixed width and height
- 9 <img> in a with class
- 10 Remove border from an image
- 11 Set background to #fff for an image
- 12 Set border to "6px double #666" for an image
- 13 Set image margin top and left to negative value
- 14 Set padding to 4px
- 15 Set width for an image
- 16 Shrinkwrapped image by setting both width and height to auto
- 17 Stretched Image by setting both width and height to 100%
- 18 vertical align 100 percent image
Adding images and alt message with XHTML
<source lang="html4strict">
<?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>
<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" />
</body>
</html>
</source>
Alternative Text Rendering
<source lang="html4strict">
<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>
</source>
CSS Image Border
<source lang="html4strict">
<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>
</source>
display block
<source lang="html4strict">
<!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>
</source>
Image block
<source lang="html4strict">
<!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>
</source>
Image float: left
<source lang="html4strict">
<!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>
<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.
</body> </html>
</source>
Image vertical align 20px
<source lang="html4strict">
<!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>
The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically 20 pixels from the baseline.
</body> </html> </source>
Image with fixed width and height
<source lang="html4strict">
<!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>
<img src="http://www.wbex.ru/style/logo.png" id="fixed" />
</body>
</html>
</source>
<img> in a with class
<source lang="html4strict">
<!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>
<img src="http://www.wbex.ru/style/logo.png" alt="" />
</body>
</html>
</source>
Remove border from an image
<source lang="html4strict">
<!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>
</source>
Set background to #fff for an image
<source lang="html4strict">
<!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>
</source>
Set border to "6px double #666" for an image
<source lang="html4strict">
<!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>
</source>
Set image margin top and left to negative value
<source lang="html4strict">
<!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>
</source>
Set padding to 4px
<source lang="html4strict">
<!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>
</source>
Set width for an image
<source lang="html4strict">
<!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>
</source>
Shrinkwrapped image by setting both width and height to auto
<source lang="html4strict">
<!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>
</source>
Stretched Image by setting both width and height to 100%
<source lang="html4strict">
<!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>
</source>
vertical align 100 percent image
<source lang="html4strict">
<!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>
The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically 100% of the height of the line it appears on.
</body>
</html>
</source>
<source lang="html4strict">
<!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>
<img src="http://www.wbex.ru/style/logo.png" alt="" />
</body> </html>
</source>
Remove border from an image
<source lang="html4strict">
<!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>
</source>
Set background to #fff for an image
<source lang="html4strict">
<!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>
</source>
Set border to "6px double #666" for an image
<source lang="html4strict">
<!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>
</source>
Set image margin top and left to negative value
<source lang="html4strict">
<!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>
</source>
Set padding to 4px
<source lang="html4strict">
<!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>
</source>
Set width for an image
<source lang="html4strict">
<!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>
</source>
Shrinkwrapped image by setting both width and height to auto
<source lang="html4strict">
<!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>
</source>
Stretched Image by setting both width and height to 100%
<source lang="html4strict">
<!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>
</source>
vertical align 100 percent image
<source lang="html4strict">
<!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>
The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically 100% of the height of the line it appears on.
</body> </html></source>
