在前端开发中，我们经常会使用 CSS Reset 来统一浏览器之间的样式差异，但是这也会导致一些问题，比如图片宽高失真。本文将详细介绍这个问题的原因和解决方法。
问题原因
在 CSS Reset 中，经常会将图片的宽高设置为 0，这是为了避免出现默认的边框和间距。但是在实际使用中，如果没有正确设置图片的宽高，就会导致图片失真。
举个例子，假设我们有一张宽度为 400px，高度为 300px 的图片：
<img src="example.jpg" width="400" height="300" />
如果我们使用了 CSS Reset，将图片的宽高设为 0：
img {
border: 0;
height: 0;
width: 0;
}那么图片就会失真，显示的宽度和高度都为 0。
解决方法
解决这个问题的方法有两种：一种是通过 JavaScript 动态设置图片的宽高，另一种是利用 CSS 中的 padding-bottom 技巧。
JavaScript 设置宽高
通过 JavaScript 动态设置图片的宽高，可以避免 CSS Reset 导致的宽高失真问题。我们可以在图片加载完成后，获取图片的宽高，然后设置到图片的样式中。
-- -------------------- ---- -------
---- ----------------- ------------ --
--------
--- --- - -----------------------------------
---------- - ---------- -
--- ----- - ----------
--- ------ - -----------
--------------- - ----- - -----
---------------- - ------ - -----
--
---------这样就可以避免 CSS Reset 导致的宽高失真问题了。
CSS padding-bottom 技巧
利用 CSS 中的 padding-bottom 技巧，也可以解决宽高失真的问题。我们可以设置一个固定的宽度，然后通过 padding-bottom 来计算图片的高度。
-- -------------------- ---- ------- -------------- - ------ ------ ------- -- --------------- ---- --------- --------- - -------------- --- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- -
这里的 padding-bottom 为 75%，是因为图片的高度是宽度的 75%。通过这种方式，我们可以保证图片按照比例显示，并且不会失真。
总结
在使用 CSS Reset 时，需要注意图片的宽高问题，可以通过 JavaScript 或者 CSS padding-bottom 技巧来解决。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65605148d2f5e1655da801aa