导航图片固定高度居中显示小技巧

最新推荐文章于 2022-08-29 17:41:49 发布

原创最新推荐文章于 2022-08-29 17:41:49 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

案例同时被 2 个专栏收录

27 篇文章

订阅专栏

html

25 篇文章

订阅专栏

本文介绍如何通过HTML和CSS实现导航图居中显示，同时保持宽度自适应且高度固定，确保图片清晰不变形。具体步骤包括制作背景图及使用CSS属性控制布局。

需求：导航图居中，宽度自适应高度不随屏宽减小而减小，图片不会变小。
1.制作背景图，两边足够长，如下

2.代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .text{
     height: 410px;
     background-repeat: no-repeat;
     background-position:center center;
     /*以下的是为了防止容器高度和图片高度不一致而导致出现空白的区域*/
     background-size:cover;
   }

  </style>
</head>

<body>
 <div class="text" style="background-image: url('22.jpg')" >

 </div>
</body>

</html>