Собственно нужно сверстать вот так
Это вообще реализуемо средствами CSS?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуСамое простое, с помощью таблицы.
table {
background: url(https://snap-photos.s3.amazonaws.com/img-thumbs/280h/2FQ69FRGV6.jpg) center/cover no-repeat;
width: 420px;
height: 280px;
border-spacing: 0;
}
table td {
border: 4px solid #fff;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Пример 1
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.pict-container{
max-width: 400px;
margin: 15px auto;
}
.pict{
padding-bottom: 50%;
background: #ccc url(http://static1.businessinsider.com/image/5731016652bcd063018c1e12-480/ferrari-488gtb-1.jpg) no-repeat center top;;
background-size: cover;
position: relative;
}
.pict:before{
content: '';
position: absolute; top: 50%; left: 0;
width: 100%;
height: 10px;
margin-top: -5px;
background: #fff;
}
.pict > span{
position: absolute; top: 0; left: 25%;
width: 10px;
height: 100%;
margin-left: -5px;
background: #fff;
}
.pict > span:nth-of-type(2){left: 50%;}
.pict > span:nth-of-type(3){left: 75%;}
<div class="pict-container">
<div class="pict">
<span></span>
<span></span>
<span></span>
</div>
</div>
Пример 2
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.pict-container{
max-width: 400px;
margin: 15px auto;
}
.pict{
padding-bottom: 50%;
position: relative;
}
.pict > img{
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
}
.pict:before{
content: '';
position: absolute; top: 50%; left: 0;
width: 100%;
height: 10px;
margin-top: -5px;
background: #fff;
z-index: 1;
}
.pict > span{
position: absolute; top: 0; left: 25%;
width: 10px;
height: 100%;
margin-left: -5px;
background: #fff;
}
.pict > span:nth-of-type(2){left: 50%;}
.pict > span:nth-of-type(3){left: 75%;}
<div class="pict-container">
<div class="pict">
<img src="http://static1.businessinsider.com/image/5731016652bcd063018c1e12-480/ferrari-488gtb-1.jpg" alt="">
<span></span>
<span></span>
<span></span>
</div>
</div>