响应式布局，需要支持

Posted 2023-03-17

【中文标题】响应式布局，需要支持

【英文标题】：Responsive layout, need support

【发布时间】：2021-08-26 15:35:48

【问题描述】：

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

这是我的html：

        <section class="tiles">
        <div class="first-tile">
            <div class="tile-img">
                <img src="./assets/tile-img.webp" >
            </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>

【问题讨论】：

试试 .tilesflex-warp:wrap

【参考方案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" >
    <div class="text">
      <h4> Lorem</h4>
      <p>Lorem</p>
    </div>
  </div>
  <div class="bloc"></div>
  <div class="bloc"></div>
</div>

【讨论】：

谢谢，它可能有效。第一个图块内的图像怎么样？如何根据图块大小改变其大小？

您只需将选择器添加到img 并设置其width

我编辑了sn-p，这样您就可以为您的项目打下良好的基础