移动端web，我踩过的坑之<img>...

第一个坑是不想背锅的img标签，明明是那时还是菜鸟，今天依旧菜鸟的我自己，没有逐字逐句认真看文档(・。・)

1. <img> 标签创建的是被引用图像的占位空间。所以请务必为img标签设置width。这涉及到用户体验（严肃脸(..•˘_˘•..)），您老板肯定不想因为糟糕的网页渲染性能而失去用户。

特别是移动端，为img设置一个em单位的宽度，图片才能随着用户屏幕的尺寸弹性伸缩。

　　1.1  昨天在PC端发现，同一个页面，同一张图，图片有时候会出现宽度变形高度不变。 把设置的height取消掉就不会有这种bug出现。原因不明，找不出是哪里的样式冲突。

　　1.2  <img> 标签创建的是被引用图像的占位空间。指定宽高尺寸可改善网站性能。通常情况下，指定了img的宽度，高度也会随之按比例缩放。

　　　　注意：如果提供了一个百分比形式的 width 值而忽略了 height，那么不管是放大还是缩小，浏览器都将保持图像的宽高比例。这意味着图像的高度与宽度之比将不会发生变化，图像也就不会发生扭曲。

　　1.3  今天的一个移动端页面，在chrome浏览器手机模式预览下，有两张图因为只指定宽度，没有指定height而产生变形。调试了一番，终于发现: 父容器布局的样式 display: flex， align-items 属性。因为这个属性的默认值导致图片拉伸到容器高度：

• • 　　stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

　　　　而在火狐的手机模式下预览，就没有这个问题。不管怎么说，既然有这个潜在风险，那就再指定下弹性高度，或者设置 align-items 属性为center。

　　　　为什么要用display:flex 呢。水平居中的三个办法，justify-content: center; text-align: center ， margin: 0 auto; 区别和用法在哪里呢。什么情况下会无效呢。

　　1.4 翻了MDN上的 img api 英文原文，没有看到推荐只指定宽度的说法。点击这个链接查看：MDN上的HTML element reference: img

　　1.5 继续翻w3上的英文教程：the-img-element。也并未推荐只写宽度。

The IDL attributes width and height must return the rendered width and height of the image, in CSS pixels, if the image is being rendered, and is being rendered to a visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is available but not being rendered to a visual medium; or else 0, if the image is not available. [CSS]

2. <a>包含的<img> 设置max-width:100%无效.

先来看下max-width可能的值%概念： 

max-width:% 定义基于包含它的块级对象的百分比最大宽度。

100%则是如果指定元素的宽度不超过父元素的宽度，则大小不变，如果超过了父元素的宽度，则将宽度收缩为父元素的宽度。

max-width overrides width, but min-width overrides max-width. 

所以，这个时候要给<a>加个 - "display:block;"- 等等这些样式：能让<a>从行内摇身一变，变为块状元素。

ps：

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

3. <img> 在不同浏览器下的表现差异。

这种差异，即便是像下面一样初始化设置样式也于事无补。有兴趣可以试试看。不得不说，chrome和FF这些浏览器，有时候有点贴心得过头。

img{
    margin: 0;
    padding: 0;       
}

解决方案有N种：

①. 简单粗暴的：把<img>间的空格注释掉，像这样：

    <div class='img-dad'>
        <img src="1.jpg" alt=""><!-- 
         --><img src="2.jpg" alt=""><!-- 
         --><img src="3.jpg" alt=""><!-- 
          --><img src="4.jpg">
    </div>

这种办法能解决<img>左右边距的问题，但是上下边距还在呀，而且那么多注释标签，看着也不美观对吧~

②. 依旧给<img>设置样式：

    img{
        vertical-align: top;
    }

这个方法，和第一种一样，也只能去掉上下边距。

③. 给<img>他爸元素加个样式:

  办法A:  .img-dad{
        font-size: 0;
    }

啊，perfect！上下左右边距都不见了，我们可以想要多少边距就要多少边距了。

④. 给<img>设置样式：

方法A：img{
        float: left;
    }
方法B：img{
        display: block;/table/box/list-item (等等这些可以让它变成块的东西)
    }
根据实际需要结合使用。

 4. <img>的border-radius，在安卓机出现圆角变形，像是秃了一部分头顶一样。解决办法：img外嵌套一层div，设定border-radius

 

转载于:https://www.cnblogs.com/dodocie/p/6674355.html