대체 접근 방식은 어떻습니까?
깡깡이
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<div>ABOUT</div>
</div>
<div class='cell'>
<div>PHOTOGRAPHY</div>
</div>
<div class='cell'>
<div>DESIGN</div>
</div>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
}
.table {
display:table;
width:100%;
height:100%;
font-size: 60px;
font-family:'Bebas Neue', arial, helvetica, sans-serif;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
text-align: left;
position:relative;
}
.cell:nth-child(1) {
background:url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center;
background-size: cover;
}
.cell:nth-child(2) {
background:url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center;
background-size: cover;
}
.cell:nth-child(3) {
background:url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center;
background-size: cover;
}
.cell > div {
position:absolute;
bottom:0;
}
출처
https://stackoverflow.com/questions/22019805