切换风格

默认晚霞 雪山 粉色心情 伦敦 花卉 绿野仙踪 加州 白云 星空 薰衣草 城市 简约黑色 简约米色 龙珠
设为首页收藏本站
开启辅助访问
返回列表 显示全部楼层 |图片模式 |正序浏览 |阅读模式
回复 0
不懂»首页 › 不懂就下 › 知识付费 › html问题探究: 图片居中，大小自适应

50

主题

76

帖子

1140

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1140
html问题探究: 图片居中，大小自适应[复制链接]
发表于 2024-3-8 19:14:24 | 显示全部楼层 |阅读模式
不裁剪的方案
1、指定容器内等比例缩放，并控制中上下左右居中（小图拉伸）
1.1 效果
1.png
1.2代码

  2. <!html>

  4.   <head>
  5.     <meta charset="utf-8">
  6.     <title> css3 图片等比缩放，居中显示 </title>
  7.     <style>
  8.       .mysec {
  9.         width: 200px;
  10.         height: 200px;
  11.         border: solid 1px #ccc;
  12.         background-color: rgb(157, 234, 240);
  13.         background-origin: content;
  14.         /*从content区域开始显示背景*/
  15.         background-position: 50% 50%;
  16.         /*图片上下左右居中*/
  17.         background-size: contain;
  18.         /*保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域*/
  19.         background-repeat: no-repeat;
  20.         /*图像不重复显示*/
  21.       }
  22.     </style>
  23.   </head>

  25.   <body>
  26.     <section class="mysec" style=" background-image:url('https://picsum.photos/800/400');"></section>
  27.     <section class="mysec" style=" background-image:url('https://picsum.photos/400/800');"></section>
  28.     <section class="mysec" style=" background-image:url('https://picsum.photos/400/400');"></section>
  29.     <section class="mysec" style=" background-image:url('https://picsum.photos/100/100');"></section>
  30.   </body>

  32.   </html>
复制代码
2、使用img，transform+position（小图不拉伸）
2.1效果
2.png
2.2代码
  1. <html>
  2. <body>
  3.   <div class="border" >
  4.     <div class="img-border">
  5.       <img src="https://picsum.photos/900/900" alt="">
  6.     </div>
  7.   </div>
  8.   <div class="border">
  9.     <div class="img-border">
  10.       <img src="https://picsum.photos/200/900" alt="">
  11.     </div>
  12.   </div>
  13.   <div class="border">
  14.     <div class="img-border">
  15.       <img src="https://picsum.photos/100/100" alt="">
  16.     </div>
  17.   </div>
  18.   <div class="border">
  19.     <div class="img-border">
  20.       <img src="https://picsum.photos/1200/400" alt="">
  21.     </div>
  22.   </div>
  23.   <style>
  24.     .border {
  25.       width: 200px;
  26.       height: 200px;
  27.       position: relative;
  28.     }
  29.     .img-border {
  30.       width: 200px;
  31.       height: 200px;
  32.       border: 2px solid;
  33.       position: absolute;
  34.       left: 50%;
  35.       top: 50%;
  36.       transform: translateX(-50%) translateY(-50%);
  37.       -webkit-transform: translateX(-50%) translateY(-50%);
  38.     }
  39.     img {
  40.       max-width: 100%;
  41.       max-height: 100%;
  42.       position: fixed;
  43.       left: 50%;
  44.       top: 50%;
  45.       transform: translateX(-50%) translateY(-50%);
  46.       -webkit-transform: translateX(-50%) translateY(-50%);
  47.     }

  49.   </style>
  50. </body>
  51. </html>
复制代码
QQ截图20240308191140.jpg
3、 background-size: cover
3.1效果
3.png
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 这是第一种实现。

3.2代码
  1. <html>

  3. <body>
  4.   <div style="margin: 20px; display: flex;justify-content: center;">
  5.     <div class="cover" style=" background-image: url('https://picsum.photos/200/500');"></div>&#8203;
  6.     <div class="cover" style=" background-image: url('https://picsum.photos/500/200');"></div>&#8203;
  7.     <div class="cover" style=" background-image: url('https://picsum.photos/400/400');"></div>&#8203;
  8.     <div class="cover" style=" background-image: url('https://picsum.photos/50/50');"></div>&#8203;
  9.   </div>
  10.   <div style="margin: 20px; display: flex;justify-content: center;">
  11.     <div class="contain" style=" background-image: url('https://picsum.photos/200/500');"></div>&#8203;
  12.     <div class="contain" style=" background-image: url('https://picsum.photos/500/200');"></div>&#8203;
  13.     <div class="contain" style=" background-image: url('https://picsum.photos/400/400');"></div>&#8203;
  14.     <div class="contain" style=" background-image: url('https://picsum.photos/50/50');"></div>&#8203;
  15.   </div>
  16.   <style>
  17.     .cover {
  18.       border: 1px solid;
  19.       width: 150px;
  20.       height: 100px;
  21.       background-size: cover;
  22.       background-repeat: no-repeat;
  23.       background-position: 50% 50%;
  24.     }
  25.     .contain {
  26.       border: 1px solid;
  27.       width: 150px;
  28.       height: 100px;
  29.       background-size: contain;
  30.       background-repeat: no-repeat;
  31.       background-position: 50% 50%;
  32.     }
  33.   </style>
  34.   <script>
  35.   </script>
  36. </body>
  37. </html>
复制代码
4、object-fit: cover
4.1效果
4.png
object-fit CSS 的值有以下几种：

contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。和backgroud-size属性的contain类似，只是多了黑边。

cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。和background-size属性的cover类似。

fill：被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。相当于固定宽高下未做任何调整的样式。

none：被替换的内容尺寸不会被改变。

scale-down：内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。

4.2代码
  1. <html>

  3. <body >
  4.   <div  style="margin: 20px; display: flex;justify-content: center;">
  5.     <div class="border">
  6.       <img class="contain" src="https://picsum.photos/900/900" alt="">
  7.     </div>
  8.     <div class="border">
  9.       <img class="contain" src="https://picsum.photos/200/900" alt="">
  10.     </div>
  11.     <div class="border">
  12.       <img class="contain" src="https://picsum.photos/100/100" alt="">
  13.     </div>
  14.     <div class="border">
  15.       <img class="contain" src="https://picsum.photos/1200/400" alt="">
  16.     </div>
  17.   </div>
  18.   <div style="margin: 20px; display: flex;justify-content: center;">
  19.     <div class="border">
  20.       <img class="cover" src="https://picsum.photos/900/900" alt="">
  21.     </div>
  22.     <div class="border">
  23.       <img class="cover" src="https://picsum.photos/200/900" alt="">
  24.     </div>
  25.     <div class="border">
  26.       <img class="cover" src="https://picsum.photos/100/100" alt="">
  27.     </div>
  28.     <div class="border">
  29.       <img class="cover" src="https://picsum.photos/1200/400" alt="">
  30.     </div>
  31.   </div>

  33.   <style>
  34.     .border {
  35.       width: 200px;
  36.       height: 200px;
  37.       border: 1px solid;
  38.     }

  40.     .cover {
  41.       object-fit: cover;
  42.       width: 200px;
  43.       height: 200px;
  44.     }

  46.     .contain {
  47.       object-fit: contain;
  48.       width: 200px;
  49.       height: 200px;
  50.     }
  51.   </style>
  52. </body>

  54. </html>
复制代码


5、overflow:hidden（简陋）
5.1效果 5.png
5.2代码

  1. <html>

  3. <body>
  4.   <div style="margin: 20px; display: flex;justify-content: center;">
  5.     <div class="border">
  6.       <img class="" src="https://picsum.photos/900/900" alt="">
  7.     </div>
  8.     <div class="border">
  9.       <img class="" src="https://picsum.photos/200/900" alt="">
  10.     </div>
  11.     <div class="border">
  12.       <img class="" src="https://picsum.photos/100/100" alt="">
  13.     </div>
  14.     <div class="border">
  15.       <img class="" src="https://picsum.photos/1200/400" alt="">
  16.     </div>
  17.   </div>
  18.   <div style="margin: 20px; display: flex;justify-content: center;">
  19.     <div class="border">
  20.       <img class="absolute" src="https://picsum.photos/900/900" alt="">
  21.     </div>
  22.     <div class="border">
  23.       <img class="absolute" src="https://picsum.photos/200/900" alt="">
  24.     </div>
  25.     <div class="border">
  26.       <img class="absolute" src="https://picsum.photos/100/100" alt="">
  27.     </div>
  28.     <div class="border">
  29.       <img class="absolute" src="https://picsum.photos/1200/400" alt="">
  30.     </div>
  31.   </div>

  33.   <style>
  34.     .border {
  35.       border: 1px solid;
  36.       width: 300px;
  37.       height: 200px;
  38.       display: block;
  39.       position: relative;
  40.       overflow: hidden;
  41.     }

  43.     .absolute {
  44.       position: absolute;
  45.       top: 0;
  46.       left: 0;
  47.       width: 100%;
  48.     }
  49.   </style>
  50. </body>

  52. </html>
复制代码



高比, background, position, border

相关帖子
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|不懂 ( 粤ICP备14042591号-1 )|网站地图

GMT+8, 2024-11-21 22:59 , Processed in 0.076742 second(s), 31 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

返回顶部