问题探究: 图片居中，大小自适应

最新推荐文章于 2022-09-26 17:44:38 发布
最新推荐文章于 2022-09-26 17:44:38 发布
阅读量477 收藏 3
点赞数 1
分类专栏： 开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37152533/article/details/108702220
版权

不裁剪的方案

1、指定容器内等比例缩放，并控制中上下左右居中（小图拉伸）

1.1 效果

在这里插入图片描述

1.2代码

<!html>

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

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

  </html>

2、使用img，transform+position（小图不拉伸）

2.1效果

在这里插入图片描述

2.2代码
<html>
<body>
  <div class="border" >
    <div class="img-border">
      <img src="https://picsum.photos/900/900" alt="">
    </div>
  </div>
  <div class="border">
    <div class="img-border">
      <img src="https://picsum.photos/200/900" alt="">
    </div>
  </div>
  <div class="border">
    <div class="img-border">
      <img src="https://picsum.photos/100/100" alt="">
    </div>
  </div>
  <div class="border">
    <div class="img-border">
      <img src="https://picsum.photos/1200/400" alt="">
    </div>
  </div>
  <style>
    .border {
      width: 200px;
      height: 200px;
      position: relative;
    }
    .img-border {
      width: 200px;
      height: 200px;
      border: 2px solid;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
    }
    img {
      max-width: 100%;
      max-height: 100%;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
    }

  </style>
</body>
</html>
position
static该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白.position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
absolute元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
sticky元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

裁剪的方案

3、 background-size: cover

3.1效果

在这里插入图片描述

cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 这是第一种实现。

3.2代码
<html>

<body>
  <div style="margin: 20px; display: flex;justify-content: center;">
    <div class="cover" style=" background-image: url('https://picsum.photos/200/500');"></div>​
    <div class="cover" style=" background-image: url('https://picsum.photos/500/200');"></div>​
    <div class="cover" style=" background-image: url('https://picsum.photos/400/400');"></div>​
    <div class="cover" style=" background-image: url('https://picsum.photos/50/50');"></div>​
  </div>
  <div style="margin: 20px; display: flex;justify-content: center;">
    <div class="contain" style=" background-image: url('https://picsum.photos/200/500');"></div>​
    <div class="contain" style=" background-image: url('https://picsum.photos/500/200');"></div>​
    <div class="contain" style=" background-image: url('https://picsum.photos/400/400');"></div>​
    <div class="contain" style=" background-image: url('https://picsum.photos/50/50');"></div>​
  </div>
  <style>
    .cover {
      border: 1px solid;
      width: 150px;
      height: 100px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .contain {
      border: 1px solid;
      width: 150px;
      height: 100px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
  </style>
  <script>
  </script>
</body>
</html>

4、object-fit: cover

4.1效果

在这里插入图片描述
object-fit CSS 的值有以下几种：

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

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

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

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

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

4.2代码
<html>

<body >
  <div  style="margin: 20px; display: flex;justify-content: center;">
    <div class="border">
      <img class="contain" src="https://picsum.photos/900/900" alt="">
    </div>
    <div class="border">
      <img class="contain" src="https://picsum.photos/200/900" alt="">
    </div>
    <div class="border">
      <img class="contain" src="https://picsum.photos/100/100" alt="">
    </div>
    <div class="border">
      <img class="contain" src="https://picsum.photos/1200/400" alt="">
    </div>
  </div>
  <div style="margin: 20px; display: flex;justify-content: center;">
    <div class="border">
      <img class="cover" src="https://picsum.photos/900/900" alt="">
    </div>
    <div class="border">
      <img class="cover" src="https://picsum.photos/200/900" alt="">
    </div>
    <div class="border">
      <img class="cover" src="https://picsum.photos/100/100" alt="">
    </div>
    <div class="border">
      <img class="cover" src="https://picsum.photos/1200/400" alt="">
    </div>
  </div>

  <style>
    .border {
      width: 200px;
      height: 200px;
      border: 1px solid;
    }

    .cover {
      object-fit: cover;
      width: 200px;
      height: 200px;
    }

    .contain {
      object-fit: contain;
      width: 200px;
      height: 200px;
    }
  </style>
</body>

</html>

5、overflow:hidden（简陋）

5.1效果

在这里插入图片描述

5.2代码
<html>

<body>
  <div style="margin: 20px; display: flex;justify-content: center;">
    <div class="border">
      <img class="" src="https://picsum.photos/900/900" alt="">
    </div>
    <div class="border">
      <img class="" src="https://picsum.photos/200/900" alt="">
    </div>
    <div class="border">
      <img class="" src="https://picsum.photos/100/100" alt="">
    </div>
    <div class="border">
      <img class="" src="https://picsum.photos/1200/400" alt="">
    </div>
  </div>
  <div style="margin: 20px; display: flex;justify-content: center;">
    <div class="border">
      <img class="absolute" src="https://picsum.photos/900/900" alt="">
    </div>
    <div class="border">
      <img class="absolute" src="https://picsum.photos/200/900" alt="">
    </div>
    <div class="border">
      <img class="absolute" src="https://picsum.photos/100/100" alt="">
    </div>
    <div class="border">
      <img class="absolute" src="https://picsum.photos/1200/400" alt="">
    </div>
  </div>

  <style>
    .border {
      border: 1px solid;
      width: 300px;
      height: 200px;
      display: block;
      position: relative;
      overflow: hidden;
    }

    .absolute {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
  </style>
</body>

</html>
弱鸡如我
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
923723914
09-11 4332
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; botto...
如何让图片自适应不同屏幕宽度，并居中显示。
热门推荐
diligentkong的博客
07-07 6万+
我们在浏览网站的时候发现，很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分，这里我们介绍两种方式，第一种就是常见的方式，用定位我简单定义为三部曲： - 让包裹图片的盒子绝对定位， - left:50%, - Margin-left：图片宽度的一半 看例子吧：<!DOCTYPE html> <html lang="en"> <head>
JS实现图片居中且大小自适应
05-11
JS实现图片居中且大小自适应
图片自适应居中显示
航仔的博客
05-13 207
html <div class="box"> <img src="img.png" /> </div> css .box{ width: 500px; height:500px; position: relative; border: 1px solid #eee; } .box img{ position: absolute; left: 0; top: 0; right: 0;
图片自适应居中
wuyufei729的博客
05-28 194
图片等比例充满：image标签添加属性object-fit: container;width:100%;height:100%; 图片自适应居中: 父标签display:flex;
CSS网页制作技巧:图片的自适应居中和兼容处理(转）
weixin_34148508的博客
01-11 502
http://www.webjx.com/css/divcss-33180.html 前几天在做腾讯微博的微卖场的时候，遇到需要做图片居中的需求。也就是说，商品列表中的图片需要居中显示。因为图片是卖家自己把商品图片链接过来，商品图片的大小没有做限制和过滤。所以我们需要做的是，让图片在容器当中水平居中、垂直居中、图片自适应容器大小。图片原图大小和在容器中显示的大小有这样的关系： 假设容器大小为2...
实现图片自适应居中的一些方法，以及完美解决方法———object-fit
qq_43682422的博客
09-26 1329
可以看到我们需要明确的知道图片的宽高才能应用不同的样式，除非图片是1:1的正方形，否则必然会出现是宽度自适应还是高度自适应的问题。/* 高度100%，宽度自适应，原图是宽度小于高度，所以宽度不设置用来自适应。*如果是宽度大于高度，则宽度100%，高度不设置用来自适应。/* 高度100%，宽度自适应，原图是宽度小于高度，所以宽度不设置用来自适应。*如果是宽度大于高度，则宽度100%，高度不设置用来自适应。*千万不能都宽高都设置100%，否则图片会被拉伸变形！/* 宽度和高度务必都要设置成100%*/
让html元素随浏览器的大小自适应垂直居中的实现方法
11-24
但是很多时候会用到元素跟随浏览器的大小垂直居中，如在制作展示官网、活动展示网等等的时候。 问题： 实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。 解决方案： 1、浏览器可视区域的高度-元素的高度/2 = 元素...
大图片根据分辨率自适应宽度仍居中显示
12-13
问题：一个1920*900的大图，在1024*768的分辨率只能显示一部分，希望仍居中显示 解决方案CSS: 复制代码代码如下:width: 100%; background-position: 50P%; 示例code：  复制代码代码如下:<style> body { ...
纯js实现div内图片自适应大小(已测试，兼容火狐)
10-25
首先，我们要解决的问题是当图片的原始尺寸未知，且其所在的div容器尺寸也未知时，如何使图片自适应这个div。这个需求主要涉及到两个关键点：一是获取图片和div的尺寸，二是计算并调整图片的大小。 1. 获取图片和...
未知大小的图片自适应水平垂直居中源码纯CSS
04-30
未知大小的图片 垂直居中，水平居中，纯CSS。兼容主流浏览器。
Jquery图片自适应大小并居中
08-17
鄙人对Jquery语法不是非常熟练，写起来跟C#代码差不多，还请包涵。纯属抛砖引玉，欢迎指教. 这个方法可以控制图片的尺寸。在页面显示图片时，如果碰到又细又长...可已很好的让其在指定大小的容器内，以相应的比例显示。
修改背景图片居中并自适应宽度的css
younger_z的专栏
02-17 5530
BODY {background-image: URL(photo/picture1.jpg);background-position: center;background-repeat: no-repeat;background-attachment: fixed;}-->
CSS IMG 居中自适应收集
Cons_Step_By_Step
08-28 559
1.section方案class.centerImg{ border:solid 1px #ccc; background-color:red; background-image:url(xxx.jpg); background-origin:content; background-position:50% 50%; background-si
css3 自适应 图片居中,图片和文字自适应居中与CSS垂直水平居中
weixin_31974757的博客
08-03 434
图片和文字自适应居中与CSS垂直水平居中图片居中：css代码：.banner{width:100%;position:relative;height:600px;overflow:hidden;}.banner img {height: 100%;width: auto;position: absolute;top: 0;left: 50%;transform: translateX(-50%);...
【css】图片根据宽高自适应，并居中
u011279583的博客
07-02 847
参考：https://www.jb51.net/html5/714382.html .img-box { display: flex; align-items: center; justify-content: center; } .img-box img { max-width: 100%; max-height: 100%; }
css让图片自适应容器（div）大小并居中显示
小柠檬爱编程
05-12 3654
我们在写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况，下面我就开门见山的说明一下怎样去实现这样一个效果。(因为此图片表示很难过…哎); <div> <img src="1.jpg" alt=""> </div> div { width: 400px; height: 400px;//对于图片的多变性,很多情况下不给固定高,让图片自适应,避免图片变形失真 border-radius: 5px; display:
图片自适应父元素大小，并左右上下居中的css方法
wangjie962311的博客
09-21 573
效果图：代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
css font-face设置图片居中，大小自适应，给出示例代码
最新发布
04-24
好的，下面是一个基本的示例代码： ```css @font-face { font-family: "MyFont"; src: url("font.ttf"); } .my-image { display: block; max-width: 100%; max-height: 100%; margin: auto; } .my-text { font-family: "MyFont", sans-serif; } ``` 在这个代码中， `@font-face` 是用来定义自定义字体的，我们创建了一个叫做 "MyFont" 的字体并指定了它需要的字体文件。对于图片，我们使用了一个类为 `.my-image` 的 CSS 样式。这个样式将图片设置为块级元素，然后使用 `max-width` 和 `max-height` 对图片的大小进行控制，保证它不会超过父元素的大小。最后，我们将 `margin` 设置为 `auto`，这表示使图片在其容器中水平和垂直居中。 除了图片外，我们还为其它文本内容指定了 "MyFont" 字体，使用了一个类为 `.my-text` 的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值