css 图片不变形解决办法

众所周知，CSS样式表能够为网页中的图像（如logo）定义呈现和布局。但是在某些情况下，使用CSS来实现图像大小和宽高比的控制会导致图片变形的问题。那么如何解决这个问题呢？下面我们来介绍一些解决办法。

img {
  max-width: 100%;
  height: auto;
}

上述代码是一种相对简单的解决方案。通过将图像的最大宽度限制为100％，可以使图像的大小自动适应图像容器的大小。同时，设置“auto”作为高度，可以确保图像的长宽比将保持不变，不会因容器大小的更改而变形。

div {
  position:relative;
  height:0;
  padding-bottom:50%;
}
div img {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  max-width:100%;
  max-height:100%;
  margin:auto;
}

另外一种解决方法是使用CSS定义了一个相对定位占位符，该定位是基于容器高度的百分比，并且设置了一个相对填充（“padding-bottom”）。然后，通过设定绝对定位的图像，可以确保图像始终保持其纵横比例，而不是变形。

在实际使用中，我们可以根据具体的场合选择不同的解决方案来保证图片不变形。