Q&A
ベストアンサー
回答有難うございます！
今ダミーで作製してみました。
ボックスがリストにはなっていませんが…
以下がソースになります。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<style>
/* BOX WIDTH */
.box {
position: relative;
top: 0; left: 0;
width: 10%;
height: auto;
background: #fff;
border:1px solid #ccc;
}
.box img {
text-align:center;
margin:auto;
vertical-align:middle;
max-width:100%;
max-height:100%;
}
/* BOX RATIO */
.ratio-1_1:before {
content: "";
display: block;
padding-top: 100%; /* 1:1 */
}
/* ADD YOUR CONTENT */
.inner {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
.inner p {
color: #FFF;
font-size: 15px;
}
/* CONTENT CENTERING */
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.table > * {
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<!-- 1:1 -->
<div class="box ratio-1_1">
<div class="inner">
<div class="table">
<img src="http://sokuup.net/img/soku_08804.jpg"/>
</div>
</div>
</div>
<div class="box ratio-1_1">
<div class="inner">
<div class="table">
<img src="http://pds.exblog.jp/pds/1/201012/24/71/e0140171_18243710.jpg"/>
</div>
</div>
</div>
<div class="box ratio-1_1">
<div class="inner">
<div class="table">
<p>1 : 1</p>
</div>
</div>
</div>
<div class="box ratio-1_1">
<div class="inner">
<div class="table">
<img src="http://farm4.staticflickr.com/3636/3577220863_9394cfce18_n.jpg">
</div>
</div>
</div>
</body>
</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/29 02:32