css题目

1.对于下面的代码设置图片宽度为300px:

<img class="img" src="sthPath.png" style="width: 500px !important;" />

解法一：样式覆盖，注意，如果是样式覆盖的话，那么是写内联样式，而不是卸载css文件中。内联权重会高于css里面的。

<img class="img" src="sthPath.png" style="width: 500px !important; width: 50px !important" />

解法二：如果max-width所设置的值 < width设置的值的话，那么哪怕width的权重为!important，盒子的width也是max-width所设置的值；如果大于的话，那么就还是width所设置的值了。300 < 500，所以这里可以使用max-width进行解决：

.img {
  max-width: 300px;
}

解法三：使用变换scale，如下所示：

.img {
  transform: scale(0.6);
}

解法四：转换为border-box，接着设置padding瓜分宽度

.img {
  box-sizing: border-box;
  padding: 0 100px;
}

解法五：使用zoom，不过zoom属性兼容性很差，在Firefox所以版本中几乎全乎阵亡。

.img {
  zoom: 0.6;
}