css 图片 宽 高 非等比

CSS中的图片宽高非等比问题是Web设计中可能遇到的一个常见问题。当图片的宽高非等比时，如果不加处理，可能会导致图片变形，影响美观度。

解决宽高非等比的方法之一是通过CSS来控制图片的显示。下面是一些实例样式：

/* 宽度自适应，高度固定为100px */
img {
  height: 100px;
  width: auto;
}

/* 高度自适应，宽度固定为200px */
img {
  height: auto;
  width: 200px;
}

/* 按比例缩放，最大宽度400px */
img {
  max-width: 400px;
  height: auto;
  width: auto;
}

/* 按比例缩放，最大高度200px */
img {
  max-height: 200px;
  height: auto;
  width: auto;
}

以上样式中，通过height和width属性的取值，可以实现对图片宽高的控制。其中auto表示自适应，即根据图片本身的大小来确定宽高值。max-width和max-height属性的取值，可以限制图片的最大宽度和最大高度，保证图片缩放后不会超出设定的范围。

总之，通过适当地设置CSS样式，可以有效地解决图片宽高非等比问题，使得网站的图片显示效果更加美观。