写在前面

之前碰到过几次图片显示不全的情况我都是直接通过比例或者裁剪之类的方法,考虑到实际项目中大概不能这么做所以就有了这篇文章。

解决办法是使用css中的object-XX属性适配

object-fit属性

  • fill：默认值。在框中拉伸元素以填充整个内容框，可能会导致元素的宽高比失调；
  • contain：缩放元素使其完全适合框。如果元素的宽高比与框的宽高比不同，则元素将被添加棕色填充；
  • cover：缩放元素以填充框，元素的某些部分可能会被裁剪；
  • none：同时保持元素的宽高比并将其放置在内容框中，并且如果该框比元素大，可能会在框周围留下空白；
  • scale-down：比较 none 和 contain，然后根据它们两个之间的大小决定缩放元素或保留原始尺寸。

object-position属性

  • left：将元素定位到容器的最左边；
  • right：将元素定位到容器的最右边；
  • center：将元素居中；
  • 任何像素值、百分比值、关键字或者组合，以确定容器的左上角与替换元素的左上角之间的距离。

配合过渡动画实现类似gif的图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>解决图片显示不全</title>
</head>
<style>
  .images-container {
    text-align: center;
    margin-top: 200px;
  }

  .image {
    width: 400px;
    height: 200px;
    object-fit: cover;
    object-position: right top;
    transition: .5s all;
  }


  .images-container .image:hover {
    object-position: left bottom;
  }
</style>

<body>
  <div class="images-container">
    <img class="image" src="https://aki-bucket.oss-cn-beijing.aliyuncs.com/images/106726153_p0.png" alt="">
  </div>
</body>
<script>

</script>

</html>
  • 效果图
解决图片显示不全
  • 文章里写代码貌似过渡效果会失效？容我我再研究研究，实际效果可以复制到自己的编译器里面看