Html 大小更改后如何使用格式图像

我是编程新手。我试图得到它，所以我有一个大的图像，和两个较低的图像下降到一个较低的线，当需要的时候。有时，我的代码可以工作，这种情况就会发生。其他时候没有，我不知道为什么。有人可以看看我下面的代码，写下他们将要更改的内容以使结果一致吗。我遇到的另一个问题是控制较低图像的大小，使它们相等。如果有人能帮忙，我将不胜感激。谢谢

/*导入的字体*/
@字体{
字体系列：“Fira Sans”；
src:url（'font/firasans常规webfont.woff2'）格式（'woff2'），
url（'font/firasans regular webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
*{
保证金：0；
填充：0；
边界：0；
}
a:链接{
文字装饰：无；
颜色：黑色；
}
a:悬停{
文字装饰：无；
颜色：红色；
}
a:参观了{
文字装饰：无；
颜色：黑色；
}
托普罗先生{
字体系列：菲拉无衬线，无衬线；
字母间距：0px；
宽度：100%；
背景颜色：灰色；
}
.Image1Nav{
显示：块；
显示器：flex；
弯曲方向：立柱；
利润率最高：3%；
左缘：12.5%；
}
.第1节{
/**/
}
.Image1{
显示：块；
宽度：85%；
}
.Image2Nav{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
左缘：5%；
保证金权利：5%；
利润率最高：4%；
最小宽度：30px；
}
.第2节{
显示器：flex；
弯曲方向：立柱；
}
.Image2{
弹性：33.33%；
}
.Image3{
}

TJ

Lorem ipsum，dolor sit amet Concert


Lorem ipsum，dolor sit amet Concert


Lorem ipsum，dolor sit amet Concert

我的理解：

<header class="TopRow">
  <div>
    <h1>
      <a href="index.html">
        TJ
      </a>
    </h1>
  </div>
</header>
<div class="Image1Nav">
  <div class="Section1">
    <a href="https://www.google.com">
      <img
        class="Image1"
        src="https://placehold.it/200x200"
        alt="noimg.jpg"
      />
    </a>
    <div class="Image1txt">
      <p>
        Lorem ipsum, dolor sit amet consect
      </p>
    </div>
  </div>
</div>
<div class="Image2Nav">
  <div class="section Section2">
    <a href="https://www.google.com">
      <img
        class="Image2"
        src="https://placehold.it/200x200"
        alt="https://placehold.it/200x200"
      />
    </a>
    <div class="Image2txt">
      <p>
        Lorem ipsum, dolor sit amet consect
      </p>
    </div>
  </div>
  <div class="section Section3">
    <a href="https://www.google.com">
      <img
        class="Image3"
        src="https://placehold.it/200x200"
        alt="https://placehold.it/200x200"
      />
    </a>
    <div class="Image3txt">
      <p>
        Lorem ipsum, dolor sit amet consect
      </p>
    </div>
  </div>
</div>

我的理解是：

<header class="TopRow">
  <div>
    <h1>
      <a href="index.html">
        TJ
      </a>
    </h1>
  </div>
</header>
<div class="Image1Nav">
  <div class="Section1">
    <a href="https://www.google.com">
      <img
        class="Image1"
        src="https://placehold.it/200x200"
        alt="noimg.jpg"
      />
    </a>
    <div class="Image1txt">
      <p>
        Lorem ipsum, dolor sit amet consect
      </p>
    </div>
  </div>
</div>
<div class="Image2Nav">
  <div class="section Section2">
    <a href="https://www.google.com">
      <img
        class="Image2"
        src="https://placehold.it/200x200"
        alt="https://placehold.it/200x200"
      />
    </a>
    <div class="Image2txt">
      <p>
        Lorem ipsum, dolor sit amet consect
      </p>
    </div>
  </div>
  <div class="section Section3">
    <a href="https://www.google.com">
      <img
        class="Image3"
        src="https://placehold.it/200x200"
        alt="https://placehold.it/200x200"
      />
    </a>
    <div class="Image3txt">
      <p>
        Lorem ipsum, dolor sit amet consect
      </p>
    </div>
  </div>
</div>

---

你说它不工作是什么意思？你能解释一下吗？当我把这个功能用于我的图像时，会发生两件事。当图像处于半屏幕时，图像会延伸页面的总长度，或者如果我使用全屏，它们会堆叠在其他图像的顶部。这与我想要的正好相反。从本质上说，我想问的是，当页面太小时，如何在顶部放置一个带有标题的主图像，以及在底部放置两个带有标题的较小图像。你说它不工作是什么意思？你能解释一下吗？当我对图像使用该功能时，会发生两件事。当图像处于半屏幕时，图像会延伸页面的总长度，或者如果我使用全屏，它们会堆叠在其他图像的顶部。这与我想要的正好相反。从本质上说，我想问的是，当页面太小时，如何在顶部放置一个带有标题的主图像，以及在底部放置两个带有标题的较小图像。