众所周知,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”)。然后,通过设定绝对定位的图像,可以确保图像始终保持其纵横比例,而不是变形。