Как решить задачу с четвертой картинкой, которая постоянно вываливается?

Question

[strelkovstvo]

Имеем section

<section id="articles" class="articles section-offset">
      <div class="container">
        <h2 class="section-title articles-title">
          Articles
        </h2>
          <ul class="articles-list list-reset flex">
            <li class="articles-item">
              <article class="blog-preview flex">
                <a href="#" class="blog-preview-link">
                  <img src="img/article1.jpg" alt="Blog photo 2" class="blog-preview-image">
                  <div class="blog-preview-text">
                    <time datetime="2025-04-03 23:13" class="blog-preview-time">
                      03 March 2025
                    </time>
                    <h3 class="blog-preview-title">
                      Jurisdiction
                    </h3>
                    <p class="blog-preview-descr">
                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
                    </p>
                  </div>
                </a>
              </article>
            </li>
            <li class="articles-item">
              <article class="blog-preview flex">
                <a href="#" class="blog-preview-link">
                  <img src="img/article2.jpg" alt="Blog photo 3" class="blog-preview-image">
                  <div class="blog-preview-text">
                    <time datetime="2025-04-03 23:13" class="blog-preview-time">
                      03 March 2025
                    </time>
                    <h3 class="blog-preview-title">
                      Consulting
                    </h3>
                    <p class="blog-preview-descr">
                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
                    </p>
                  </div>
                </a>
              </article>
            </li>
            <li class="articles-item">
              <article class="blog-preview flex">
                <a href="#" class="blog-preview-link">
                  <img src="img/article3.jpg" alt="Blog photo 4" class="blog-preview-image">
                  <div class="blog-preview-text">
                    <time datetime="2025-04-03 23:13" class="blog-preview-time">
                      03 March 2025
                    </time>
                    <h3 class="blog-preview-title">
                      Rights &amp;&nbsp;obligations
                    </h3>
                    <p class="blog-preview-descr">
                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
                    </p>
                  </div>
                </a>
              </article>
            </li>
            <li class="articles-item">
              <article class="blog-preview flex">
                <a href="#" class="blog-preview-link">
                  <img src="img/article4.jpg" alt="Blog photo 1" class="blog-preview-image">
                  <div class="blog-preview-text">
                    <time datetime="2025-04-03 23:13" class="blog-preview-time">
                      03 March 2025
                    </time>
                    <h3 class="blog-preview-title">
                      Contractors
                    </h3>
                    <p class="blog-preview-descr">
                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
                    </p>
                  </div>
                </a>
              </article>
            </li>
          </ul>
        </div>
      </section>

И такие стили

/* articles */
.articles {
  border: 1px solid #E4E4E4;
}

.articles-title {
  font-weight: 300;
  font-size: 36px;
  line-height: 47px;
  color: #1c1c1c;
}

.articles-list {
  --offsets: 1;
  flex-wrap: wrap;
  gap: var(--gap);
}

.articles-item {
  width: calc((100% - (var(--offsets) * var(--gap))) / (var(--offsets) + 1));
}

.blog-preview {
  overflow: hidden;
  border: 1px solid #E4E4E4;
  border-radius: 5px;
  height: 100%;
}

.blog-preview-link {
  display: flex;
  position: relative;
  width: 100%;
  transition: color 0.3s ease-in-out;
}

.blog-preview-link:hover {
  background-color: #3172B9;
}

.blog-preview-link:focus {
  background-color: #71A7E2;
}

.blog-preview-image {
  object-fit: cover;
}

.blog-preview-text {
  padding: 30px;
}

.blog-preview-time {
  display: block;
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: #787878;
  transition: color 0.3s ease-in-out;
}

.blog-preview-link:hover .blog-preview-time {
  color: #fff;
}

.blog-preview-link:focus .blog-preview-time {
  color: #fff;
}

.blog-preview-title {
  margin: 0;
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  color: #1c1c1c;
  transition: color 0.3s ease-in-out;
}

.blog-preview-link:hover .blog-preview-title {
  color: #fff;
}

.blog-preview-link:focus .blog-preview-time {
  color: #fff;
}

.blog-preview-descr {
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: #787878;
  max-width: 210px;
  transition: color 0.3s ease-in-out
}

.blog-preview-link:hover .blog-preview-descr {
  color: #fff;
}

.blog-preview-link:focus .blog-preview-descr {
  color: #fff;
}

Section ломается при разрешении 768, выпадает четвертая картинка. При этом в рекомендациях стоит: 'указать height: 100%;' , что не работает вообще никак. Как решить проблему с четвертой картинкой?

Comments

[Антон Антон]

вот почему бы не сделать песочницу на codepen вместо простыней кода? ну или хотя бы не убрать под их спойлер?
если что - для картинок есть https://picsum.photos/ где можно реальные размеры указать.

[Ankhena]

Во-первых, соглашусь с комментарием выше. Оформляйте песочницу на codepen.io
Во-вторых, тут не все стили, чтобы мы могли её сделать за вас. Не хватает кастомок, вероятно, общих стилей и т.д.
В-третьих, если заменить вот эту порнушку

width: calc((100% - (var(--offsets) * var(--gap))) / (var(--offsets) + 1));

на грид, то жить станет значительно легче. В первую очередь вам.

Теперь по теме:
1. object-fit: cover; - это прекрасно. Только обертки нет. В которую делать cover.
2. А также нет размеров у картинок ни в разметке ни в стилях.
=> адаптивным картинкам нужна обертка. Либо в её роли может выступать ячейка грида.
3. По умолчанию, дочерние элементы флекса имеют flex-shrink: 1, т.е. будут пытаться сжаться, если сосед толкается.
=> нужно либо запретить сжиматься (не забыв перечитать п1 и 2). Либо сменить флекс на грид.