blob: 60c2befac7f480949979e01b5e5e3c6081f7954e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html>
<head>
<title>Test image aspect ratio while constrained</title>
<style>
body {margin: 20px}
div {width: 640px; height: 640px; background: lightblue;}
img {border: 10px solid green}
</style>
</head>
<body>
<div>
<p>All images should be 32px by 32px like this one:</p>
<img src="pic.png" style="width:32px;height:32px;">
<p>Only one max-* constraint</p>
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<p>One max-* and fixed size constraint</p>
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<p>Two max-* constraints</p>
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<p>Both min-* and max-* constrained</p>
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<p>Bad constraints</p>
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
<img src="pic.png" style="width:32px;height:32px;">
</div>
</body>
</html>
|
