用户登录

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

打开 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 ...

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

英雄区布局样式的改进《 网页设计案例:产品页 》

统计

13559
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点