Actually you need to make it like this enter image description here

Is it generally implemented by CSS?

2 answers 2

The simplest is using a table.

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>

  • 2
    I have never seen such an application to the tables, you made me a little bit smarter) - user192664
  • But you are closing a part of the image, but not cutting it ... - Qwertiy ♦
  • @Qwertiy, it's strange that you are doing necropolishing. And what is the fundamental difference if you need a visual effect? Naturally, if you just need to cut the image into sections (for example, to save somewhere else), the implementation will be different. Of course, it would be possible to distribute the image using separate JS blocks using JS, calculating the displacements. Or just cut the picture by coordinates on the back end. - VenZell

Example 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>

Example 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>

  • This option is the most optimal in comparison with those mentioned above, since here the picture is not a background and you can assign an alto and a title to it. Brilliantly implemented! - Ivan
  • And here, too, the image is not cut, but covered with stripes. - Qwertiy ♦
  • I did not understand why the author does not want to cut the image into several and set them with backgrounds for several blocks. At the expense of the Alts, I do not agree. If you alter the image in this way, it means that it is more a visual component than content. So setting its background is quite acceptable. - Alexey Kapustsin
  • Forget about alt altogether! 99% do not know why it is needed at all - DaemonHK