Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

66 lines (48 sloc) 1.611 kb
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>&lt;img&gt; elements</title>
<style type="text/css">
img {
border-radius: 40px;
behavior: url(../build/PIE_uncompressed.htc);
border: 0;
position: relative;
}
#shadow {
-webkit-box-shadow: 0 0 10px red;
-moz-box-shadow: 0 0 10px red;
box-shadow: 0 0 10px red;
}
#pngfixCont {
padding: 10px;
background: url(background1.gif);
}
#pngfix {
border-radius: 0;
-pie-png-fix: true;
}
</style>
</head>
<body>
<h1>Images</h1>
<h2>Rounded corners</h2>
<img src="photo.jpg" />
<h2>Rounded, scaled down</h2>
<img src="photo.jpg" width="320" height="240" />
<h2>Aspect</h2>
<img src="photo.jpg" width="128" height="480" />
<img src="photo.jpg" width="640" height="128" />
<h2>With shadow</h2>
<img src="photo.jpg" id="shadow" width="320" height="240" />
<h2>In link (should remain clickable)</h2>
<a href="#" onclick="alert('clicked'); return false;"><img src="photo.jpg" width="320" height="240" /></a>
<h2>With border</h2>
<img src="border.png" style="border:10px solid red;" />
<h2>With padding</h2>
<img src="border.png" style="border:10px solid red; padding: 5px;" />
<h2>Rollover</h2>
<img src="icon-safari.png" onmouseover="this.src='icon-chrome.png'" onmouseout="this.src='icon-safari.png'" />
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.