响应式布局，需要支持

Question

我遇到了一些 CSS 问题，需要您的帮助。 我需要实现图像上显示的效果。现在的问题 - 是布局的响应性，我希望这些图块在浏览器大小发生变化时改变它们的大小，并在移动设备上显示它们。我在这里尝试了 flexbox，但我想要达到的效果有些问题。

这是我的html：

        <section class="tiles">
        <div class="first-tile">
            <div class="tile-img">
                <img src="./assets/tile-img.webp" alt="image">
            </div>
            <div class="tile-content">
                <h5>Lorem Ipsum</h4>
                <p>Lorem Ipsum</p>
            </div>
        </div>
        <div class="side-tiles">
            <div class="second-tile">
                <h5>Lorem Ipsum</h4>
                <p>Lorem Ipsum</p>
            </div>
            <div class="third-tile">
                <h5>Lorem Ipsum</h4>
                <p>Lorem Ipsum</p>
            </div>
        </div>
    </section>

Answer 1

您可以使用display:grid

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}

.bloc {
  background-color: red;
  height: 100%;
  width: 100%;
}

.bloc:nth-child(1) {
  grid-row: span 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 230px;
  max-height: 95px;
  width: auto;
  height: auto;
}

<div class="grid">
  <div class="bloc">
    <img src="https://images.unsplash.com/photo-1620654458802-d9392aa95664?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMzI1MzM0NA&ixlib=rb-1.2.1&q=85" alt="">
    <div class="text">
      <h4> Lorem</h4>
      <p>Lorem</p>
    </div>
  </div>
  <div class="bloc"></div>
  <div class="bloc"></div>
</div>