[分享]css写img高度会拉伸图片

在编写网页的过程中，样式表CSS是一个不可或缺的元素。但是在应用CSS的时候，我们需要小心一些，因为某些属性可能会导致图片被拉伸，进而影响到整个网页的设计。其中一个比较常见的问题就是CSS写img高度...

在编写网页的过程中，样式表CSS是一个不可或缺的元素。但是在应用CSS的时候，我们需要小心一些，因为某些属性可能会导致图片被拉伸，进而影响到整个网页的设计。其中一个比较常见的问题就是CSS写img高度会拉伸图片的情况。

首先，我们需要知道，img标签是有自己的高度和宽度属性的，这些属性决定了图片在网页上的显示大小。但是，如果你在CSS中用height属性设置img标签的高度，就可能会导致图片被拉伸。因为height属性会强制改变图片的高度，而宽度不会跟着改变，这就导致了图片出现了扭曲和拉伸的现象。

为了避免这种情况发生，我们应该使用width属性来控制图片的大小。width属性同样可以改变img标签的大小，但它可以保证图片的高宽比例不变，从而避免了图片被拉伸的情况。

下面是一段CSS代码展示了两种方法设置图片大小:

/* height属性会导致图片被拉伸 */
img {
  height: 200px;
}

/* width属性可以保证图片不被拉伸 */
img {
  width: 200px;
} 

总之，在设置图片大小的时候，应该注意不要使用height属性，而是使用width属性，从而避免因为CSS样式的问题导致图片被拉伸的情况。