现在我们的英雄区上的图像的显示高度，完全靠的是内容区域里面的文字支撑的。我在这个内容区域的上边儿还有下边儿用了一个百分比的边距 ..

打开 styles 下面的 hero 这个样式文件 .. 找到这个 .content .. 先去掉用在上面的 padding 属性 ..

现在英雄区上的图像的高度就是内容区里的文字的高度 .. 现在我不想让英雄区的高度受到它里面包装的文字的限制 ..

在这个元素上面，可以用一下 height 设置一下它的高度 .. 设置成 80vh .. 高度是可视口的 80% ..

在这个 image 元素的上面，也可以加上一个 height ，值也设置成 80vh ... 让图像可以保持它的比例，再用一个 object-fit ，值设置成 cover

height: 80vh;
object-fit: cover;

现在英雄区的显示高度也会响应可视口的变化了 ...

我们可以再用 max-height ，还有 min-height ，设置一下最大还有最小的高度 .. 最大高度设置成 750 .. 最小高度设置成 350px ..

max-height: 750px;
min-height: 350px;

之前我们在宽度大于等于 1200 像素的媒体查询里面，设置了 content 的固定的高度，现在可以把它去掉了 ..

缩小一下窗口的宽度 .. 我们可再去调整一下英雄区在小尺寸设备上的显示 ..

在小尺寸的移动设备上，我们把 content 的高度，设置成 auto ... 这个 image 的高度也让它变成 auto ...

现在英雄区的布局样式就符号我的要求了 ..