图片居中自适应浏览器缩放

最新推荐文章于 2024-08-23 10:23:17 发布

原创最新推荐文章于 2024-08-23 10:23:17 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

css3 同时被 2 个专栏收录

40 篇文章

订阅专栏

html5

30 篇文章

订阅专栏

代码如下，div里面放图片就好了

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>图片适应</title>
  <style>
  body{
    min-width: 1000px;//设置最小宽度，这样图片才不会乱掉
  }
    .div{
      width: 1000px;
      height: 200px;
      margin: 0 auto;
    }
    .divimg{		//如果放了图片就不用设置高度、宽度、边框
      width: 200px;
      height: 200px;
      border: 1px solid black;
      float: left;
    }
  </style>
</head>
<body>
  <div class="div">
    <div class="divimg"> </div>
     <div class="divimg"> </div>
     <div class="divimg"> </div>
     <div class="divimg"> </div>
    
  </div>
</body>

结果如下图：