Skip to content

Instantly share code, notes, and snippets.

@TirolJPN

TirolJPN/img_style_sample.html

Last active May 15, 2020 00:58
Show Gist options
  • Save TirolJPN/605163e4d79294aebb6e422e04bd7ff8 to your computer and use it in GitHub Desktop.
Save TirolJPN/605163e4d79294aebb6e422e04bd7ff8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
img_style_sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
section {
display: flex;
}
.wrapper::before {
display: block;
content: '';
padding-top: 100%;
}
.wrapper {
position: relative;
width: 400px;
background-color:whitesmoke;
margin-right: 20px;
}
.wrapper img {
position: absolute;
top: 8px;
left: 8px;
width: calc(100% - 16px);
height: calc(100% - 16px);
object-fit: contain;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
</head>
<body>
<section>
<div class="wrapper">
<img src="http://placehold.jp/24/cc9999/993333/150x100.png" />
</div>
<div class="wrapper">
<img src="http://placehold.jp/24/cc9999/993333/100x150.png" />
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment