Как разбить картинку на секции в CSS?

#html #css

Собственно нужно сверстать вот так 

Это вообще реализуемо средствами CSS?
    

Ответы

Ответ 1

Самое простое, с помощью таблицы.



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;
}



Ответ 2

Пример 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%;}

  
  
      
      
      
  





Пример 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%;}