Как сделать картинки квадратными?

Question

например, добавил контейнер сейчас размеры картинок 150 на 187.5

но в макете они квадратные тоесть ширина картинки равняется её высоте

.instagram__wrap {
  display: flex;
  flex-wrap: wrap;
  padding-top: 70px;
  padding-bottom: 120px;
  border-bottom: 1px solid #f0f0f0;
}

.instagram__item {
  display: block;
  width: 25%;
}

*{
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

<div class="instagram__wrap">
  <a href="https://www.instagram.com/p/CUUAfKXBOOV/" class="instagram__item ">
    <img src="https://scontent-frt3-1.cdninstagram.com/v/t51.29350-15/243124145_4188932921233755_5919072130561465891_n.jpg?_nc_cat=104&amp;ccb=1-5&amp;_nc_sid=8ae9d6&amp;_nc_ohc=fqFquij4cAoAX_kO8DF&amp;_nc_ht=scontent-frt3-1.cdninstagram.com&amp;edm=ANo9K5cEAAAA&amp;oh=aa8a4af79e4210d7c012a29686a14b1a&amp;oe=6157A03C">
  </a>
  <a href="https://www.instagram.com/p/CURbyBstCfB/" class="instagram__item ">
    <img src="https://scontent-frx5-1.cdninstagram.com/v/t51.29350-15/242850293_1785771211612692_2006221854141546556_n.jpg?_nc_cat=105&amp;ccb=1-5&amp;_nc_sid=8ae9d6&amp;_nc_ohc=F9pqvJkRITIAX8oyOa4&amp;_nc_oc=AQlFqY0sFNlYMMrFpC0cfO2Pw92V6xJ5twQlqMAtsU_yCgs7_IEkBxT7WDv3Xz6DYEs&amp;_nc_ht=scontent-frx5-1.cdninstagram.com&amp;edm=ANo9K5cEAAAA&amp;oh=25db5467355c13d2360364ec7349dd5e&amp;oe=61568269">
  </a>
  <a href="https://www.instagram.com/p/CUO4lNtNLil/" class="instagram__item ">
    <img src="https://scontent-frt3-1.cdninstagram.com/v/t51.29350-15/242747303_1973708732787753_9199295941408415761_n.jpg?_nc_cat=102&amp;ccb=1-5&amp;_nc_sid=8ae9d6&amp;_nc_ohc=O56EQyDGrDEAX8ZxTK8&amp;_nc_oc=AQmCOM6MFiTFdpLE1_B935HDQtDICxXjFT3X3vzBuHX8AisXpLZgHA-2RXMt1XB9lrc&amp;_nc_ht=scontent-frt3-1.cdninstagram.com&amp;edm=ANo9K5cEAAAA&amp;oh=124e30dbc063a4b9bd5890618e664345&amp;oe=61563D33">
  </a>
  <a href="https://www.instagram.com/p/CUMkx00NA3T/" class="instagram__item ">
    <img src="https://scontent-frt3-2.cdninstagram.com/v/t51.29350-15/242613520_119527457111346_6970645294049850479_n.jpg?_nc_cat=101&amp;ccb=1-5&amp;_nc_sid=8ae9d6&amp;_nc_ohc=Y77FSsm-uQAAX8d94i1&amp;_nc_ht=scontent-frt3-2.cdninstagram.com&amp;edm=ANo9K5cEAAAA&amp;oh=c53dd3fa4d80e8645b3574c2d2eb9b0a&amp;oe=61569FAE">
  </a>
  <a href="https://www.instagram.com/p/CULANcFj8dd/" class="instagram__item instagram__item--video">
    <img src="https://scontent-frt3-1.cdninstagram.com/v/t51.29350-15/242856059_283281330039846_7508396422327412082_n.jpg?_nc_cat=102&amp;ccb=1-5&amp;_nc_sid=8ae9d6&amp;_nc_ohc=rXJ17wACxz8AX9DEkYK&amp;_nc_ht=scontent-frt3-1.cdninstagram.com&amp;edm=ANo9K5cEAAAA&amp;oh=d0a1cf7831c03dbfc2f85db6c4514e5d&amp;oe=6156F83E">
  </a>
  <a href="https://www.instagram.com/p/CUHJTHQD6Y2/" class="instagram__item instagram__item--video">
    <img src="https://scontent-frx5-1.cdninstagram.com/v/t51.29350-15/242682545_1002009877308631_287685732357694151_n.jpg?_nc_cat=100&amp;ccb=1-5&amp;_nc_sid=8ae9d6&amp;_nc_ohc=F9XyULK9Z8YAX9M--gO&amp;_nc_ht=scontent-frx5-1.cdninstagram.com&amp;edm=ANo9K5cEAAAA&amp;oh=be1114de7d940de7a3a70e40fbe7c7dd&amp;oe=61574105">
  </a>
  <a href="https://www.instagram.com/p/CUEkfaEN5Sq/" class="instagram__item ">
    <img src="https://scontent-frt3-1.cdninstagram.com/v/t51.29350-15/242382802_191588466408461_7947706277403891109_n.jpg?_nc_cat=108&amp;ccb=1-5&amp;_nc_sid=8ae9d6&amp;_nc_ohc=eSD3jXX5Qm0AX9Fje75&amp;_nc_ht=scontent-frt3-1.cdninstagram.com&amp;edm=ANo9K5cEAAAA&amp;oh=507a0fe9c1c164fd256ba6f81441a600&amp;oe=61562B7E">
  </a>
  <a href="https://www.instagram.com/p/CUB9ucAtHN3/" class="instagram__item ">
    <img src="https://scontent-frx5-1.cdninstagram.com/v/t51.29350-15/242421019_1301836990248049_3581956715290760527_n.jpg?_nc_cat=105&amp;ccb=1-5&amp;_nc_sid=8ae9d6&amp;_nc_ohc=MiEX178JFn0AX-GTQoM&amp;_nc_ht=scontent-frx5-1.cdninstagram.com&amp;edm=ANo9K5cEAAAA&amp;oh=3a2973d9a069315196d444b802de424f&amp;oe=6156B7F6">
  </a>
</div>

БЛОГ НА HUSL

Как сделать картинки квадратными?

Ответы (0 шт):