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

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

总结了一个不规则不变形的解决方案：

注：先写一个长 300px 宽 200px 带边框的 div ，接近方形，实现正常显示不变形。

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

这样可以显示完整的，不变形：

若要填满容器，可以将 background-size 属性改为 100% auto ：

如下图：

同样 background-size 的 contain （完整显示）和 cover （填充）属性也能起到相同的效果。

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

可用属性：

fill 不保持纵横比缩放，使完全适应

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

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

none 保持宽高不变

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

inherit 继承

initial 默认值

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

CSS：

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

以容器宽 200px 高 300px ，为方形为例：

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

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

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

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

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

等比例缩放，多余部分空白填补：

img固定宽度和高度，不规则变形问题的解决方法-HTML笔记-w3h5-Web前端开发资源网

这种情况下两个会冲突，前面的style会优先生效，也就是后面width和height没有任何作用。

只有在没有style的情况下，后面的width才会生效。

硬要说有什么用的话，在style因为bug被取消掉的时候，可以按照后面的HW来显示。

代码如下：

$(document)ready(function(){

// 先取得原大小，加载时获取

$("#IMG")load(function(){

_imgW = thiswidth;

_imgH = thisheight;

// alert(_imgW);

// alert(_imgH);

ImgResize();

});

});

function ImgResize(){

// 再取得可视窗口的宽

var WT = $(window)width();

// 按照宽高比算出调整后的高度

var resizeH = (WT  _imgH) / _imgW;

// 将新的尺寸赋予

$("#IMG")css({width:WT,height:resizeH});

}

// 浏览器调整窗口大小时重新计算

$(window)resize(function(){

ImgResize()

});

以上就是关于img固定宽度和高度，不规则图片变形问题的解决方法全部的内容，包括:img固定宽度和高度，不规则图片变形问题的解决方法、img 里面控制width宽度与height高度不理解、jquery 图片的宽为可视窗口的宽 等比缩放如何计算出图片的高等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！