解决 CSS Reset 造成的图片宽高失真问题

在前端开发中，我们经常会使用 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 导致的宽高失真问题。我们可以在图片加载完成后，获取图片的宽高，然后设置到图片的样式中。

// javascriptcn.com 代码示例
<img src="example.jpg" id="example" />

<script>
  var img = document.getElementById('example');
  img.onload = function() {
    var width = img.width;
    var height = img.height;
    img.style.width = width + 'px';
    img.style.height = height + 'px';
  };
</script>

这样就可以避免 CSS Reset 导致的宽高失真问题了。

CSS padding-bottom 技巧

利用 CSS 中的 padding-bottom 技巧，也可以解决宽高失真的问题。我们可以设置一个固定的宽度，然后通过 padding-bottom 来计算图片的高度。

// javascriptcn.com 代码示例
.img-container {
  width: 400px;
  height: 0;
  padding-bottom: 75%;
  position: relative;
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这里的 padding-bottom 为 75%，是因为图片的高度是宽度的 75%。通过这种方式，我们可以保证图片按照比例显示，并且不会失真。

总结

在使用 CSS Reset 时，需要注意图片的宽高问题，可以通过 JavaScript 或者 CSS padding-bottom 技巧来解决。希望本文对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65605148d2f5e1655da801aa