img固定宽度和高度,不规则图片变形问题的解决方法

日常项目中,后端传图不规则,比例大小不一。前端又要去做适应,是一个让人非常头大的问题。

总结了一个不规则图片不变形的解决方案:

注:先写一个长 300px200px 带边框的 div ,图片接近方形,实现图片正常显示不变形。

<div class="box box1">
    ...
</div>

1、背景图法

通过背景图的 background-position 属性,可以使图片居中显示。国外一些网站有看到类似的案例,简单好操作。

.box1{
    background: url("https://hbimg.huabanimg.com/42d38784a9e5ad1cbce090966a7a87c274f5d27ba616-VMBaO0_fw658") no-repeat center center;
    background-size: auto 100%;
}

这样可以显示完整的图片,不变形:

img固定宽度和高度,不规则图片变形问题的解决方法 HTML笔记 第1张

若要图片填满容器,可以将 background-size 属性改为 100% auto

background-size: 100% auto;

如下图:

img固定宽度和高度,不规则图片变形问题的解决方法 HTML笔记 第2张

同样 background-sizecontain (完整显示)和 cover (填充)属性也能起到相同的效果。

2、object-fit

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框,不支持IE。

可用属性:

fill 不保持纵横比缩放图片,使图片完全适应

contain 保持纵横比缩放图片,使图片的长边能完全显示出来

cover 保持纵横比缩放图片,只保证图片的短边能完全显示出来

none 保持图片宽高不变

scale-down 当图片实际宽高小于所设置的图片宽高时,显示效果与none一致;否则,显示效果与contain一致

inherit 继承

initial 默认值

unset 继承父元素,若父元素没有属性则显示默认值

img固定宽度和高度,不规则图片变形问题的解决方法 HTML笔记 第3张

CSS:

ul>li>img{
    width: 150px;
    height: 100px;
}
ul>li:nth-child(1)>img{
    object-fit: fill;
}
ul>li:nth-child(2)>img{
    object-fit: contain;
}
ul>li:nth-child(3)>img{
    object-fit: cover;
}
ul>li:nth-child(4)>img{
    object-fit: none;
}
ul>li:nth-child(5)>img{
    object-fit: scale-down;
}

3、flex

该方法也可以实现以上两种方法的效果。

以容器宽 200px300px ,图片为方形为例:

设置 width: 100% 为图片完整显示,多出部分留白。

设置 height: 100%; 为图片全部填充,这时候需要给图片的容器添加 overflow: hidden; 属性,防止图片超出。

图片等比例缩放,多余部分,还有就是要考虑IE兼容问题,可以在手机端项目中使用。

ul{
    display: flex;
}
ul li{
    width: 200px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #23caff;
    margin: 20px;
        overflow: hidden;
}
img{
    width: 100%;
}

4、js 方法

js 方法应该比较通用,可以兼容多版本浏览器。

var img = document.getimgmentById("img");
var div = document.getimgmentById("div");
img.onload = function () {
  if (img.naturalHeight < div.offsetHeight) {
    img.style.width = "auto";
    img.style.height = "100%";
  }
}

5、jQuery方法

也可以兼容多版本浏览器,需要 jQuery 加持。

var $tabLi = $("#tab").find("ul li"),
  length = $tabLi.length,
  liWidth = $tabLi.width(),
  propArr = [];
$tabLi.each(function (i) {
  var $img = $(this).find("img");
  var width = $img.width();
  width?imgLoad.call($img[0]):($img[0].onload = imgLoad);
  function imgLoad() {
    var width = $(this).width();
    var height = $(this).height();
    propArr[i] = width/height;
    this[width>height?"width":"height"] = liWidth;
    for (var j = 0; j < length; j++)if ( !propArr[j] )return;
  }
});

6、一个原始的方法

图片等比例缩放,多余部分空白填补:

ul li {
    width: 200px;
    height: 200px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
}

ul li img {
    max-height: 100%;
    max-width: 100%;
}


推荐阅读:

设置SSL后如何实现https自动跳转

JQuery几个mouse事件的区别和用法

【笔记】微信小程序通过app.json设置底部导航

CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制

使用swiper的coverflowEffect遇到的几个问题

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)