Files
scss-grid/examples/layout/image/fit/fit.html
T
simongehrig 426dde5b61 Added
image fit

Enhanced
image cover
added aspect control
2017-04-05 09:24:14 +02:00

63 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Camera</title>
<link type="text/css"
rel="stylesheet"
href="./fit.css">
</head>
<body>
<div class="content">
<div class="img-square">
<img class="portrait" src="http://lorempixel.com/300/400/city/1">
</div>
<div class="img-square">
<img class="portrait" src="http://lorempixel.com/200/200/city/2">
</div>
<div class="img-square">
<img class="landscape" src="http://lorempixel.com/700/400/city/3">
</div>
<div class="img-square">
<img class="portrait" src="http://lorempixel.com/400/700/city/4">
</div>
</div>
<div class="content">
<div class="img-round">
<img class="portrait" src="http://lorempixel.com/300/400/city/1">
</div>
<div class="img-round">
<img class="portrait" src="http://lorempixel.com/200/200/city/2">
</div>
<div class="img-round">
<img class="landscape" src="http://lorempixel.com/700/400/city/3">
</div>
<div class="img-round">
<img class="portrait" src="http://lorempixel.com/400/700/city/4">
</div>
</div>
<div class="content">
<div class="img-wrapper">
<img class="" src="http://lorempixel.com/300/400/city/1">
</div>
<div class="img-wrapper">
<img class="" src="http://lorempixel.com/200/200/city/2">
</div>
<div class="img-wrapper">
<img class="" src="http://lorempixel.com/700/400/city/3">
</div>
<div class="img-wrapper">
<img class="" src="http://lorempixel.com/400/700/city/4">
</div>
</div>
</body>
</html>