img标签 导致图片变形

详情中 有各种宽高的 图片 如何才能最优的显示

完美解决 如果 图片宽度 小于 屏幕宽度 不处理 高度自适应

大于 屏幕宽度 则 设置为 屏幕宽度 如下代码 就可以 解决这个问题

    >>> img {
      max-width: 100%;
      /* width: 100% !important; */
      height: auto !important;
    }

拓展

4、 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%";
  }
}

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%;
}

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;
}

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-size 的 contain （完整显示）和 cover （填充）属性也能起到相同的效果。

css auto简介

css中的auto是自动适应的意思，而在css中auto往往都是默认值。
正如margin:0 auto，意思就是上下边距为0，左右边距为auto，就是自动适应。
Width:auto 这样宽度就是自动，随内容增加而增宽，随浏览器宽度而换行。