Math Functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Math Function</title>
<style>
img {
border: 3px solid;
}
.img1 {
width: calc(100% - 100px);
}
.img2 {
width: max(50%, 200px);
}
.img3 {
width: min(50%, 300px);
}
</style>
</head>
<body>
<!--
math functions allow mathematical expressions to be used as property values.
calc() function performs a calculation to be used as the property value.
max() function uses largest value, from a comma-separated list of values, as the property value.
min() function uses smallest value, from a comma-separated list of values, as the property value.
-->
<h1>Demo: Math Function</h1>
<div>
<img class="img1" src="/notes/examples/assets/img/doggy.png" alt="doggy" title="Image#1">
</div>
<div>
<img class="img2" src="/notes/examples/assets/img/doggy.png" alt="doggy" title="Image#2">
</div>
<div>
<img class="img3" src="/notes/examples/assets/img/doggy.png" alt="doggy" title="Image#3">
</div>
</body>
</html>