6

Собственно нужно сверстать вот так введите сюда описание изображения

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

1

2 ответа 2

5

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

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>

3
  • 2
    Никогда не видел такого применения таблицам, вы сделали меня чуть-чуть умнее)
    – user192664
    31 авг 2016 в 11:06
  • Но ты же закрываешь часть изображения, а не разрезаешь его...
    – Qwertiy
    15 мая 2019 в 0:03
  • @Qwertiy, странно, что некропостингом занимаешься. А в чем принципиальная разница, если нужен визуальный эффект? Естественно, если нужно именно разрезать картинку на секции (например, для сохранения куда-то еще), реализация будет другой. Можно было бы конечно и с помощью JS картинку распределить по отдельным блокам, вычислив смещения. Или именно разрезать картинку по координатам на бэкенде.
    – VenZell
    15 мая 2019 в 7:23
4

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

4
  • Этот вариант самый оптимальный в сравнении с указанными выше, так как здесь картинка не является бэккграундом и к ней можно прописать альт и тайтл. Гениально реализовано!
    – Иван
    14 мая 2019 в 22:23
  • И тут тоже изображение не разрезается, а накрывается полосками.
    – Qwertiy
    15 мая 2019 в 0:04
  • Так и не понял, почему автор не хочет разрезать изображение на несколько и задать их бэкграундами к нескольким блокам. На счёт алтов не согласен. Если вы таким образом переделываете изображение, значит оно является скорее визуальной составляющей, нежели контентом. А значит установка её бэкграундом вполне приемлима. 15 мая 2019 в 6:18
  • Забудьте про alt вообще! 99% не знают для чего оно вообще нужно
    – DaemonHK
    15 мая 2019 в 7:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.