1.对于下面的代码设置图片宽度为300px:
1
| <img class="img" src="sthPath.png" style="width: 500px !important;" />
|
解法一:样式覆盖,注意,如果是样式覆盖的话,那么是写内联样式,而不是卸载css文件中。内联权重会高于css里面的。
1
| <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进行解决:
1 2 3
| .img { max-width: 300px; }
|
解法三:使用变换scale,如下所示:
1 2 3
| .img { transform: scale(0.6); }
|
解法四:转换为border-box,接着设置padding瓜分宽度
1 2 3 4
| .img { box-sizing: border-box; padding: 0 100px; }
|
解法五:使用zoom,不过zoom属性兼容性很差,在Firefox所以版本中几乎全乎阵亡。