[分享]css中如何设置图片宽高按原比例

在CSS中，我们经常需要设置图片的宽高。但是如果只设置宽度或只设置高度，图片就会失去原有的比例，变形变形。那么如何设置图片宽高按原比例呢？下面就来介绍一下如何实现。首先，我们需要在CSS中使用back...

在CSS中，我们经常需要设置图片的宽高。但是如果只设置宽度或只设置高度，图片就会失去原有的比例，变形变形。那么如何设置图片宽高按原比例呢？下面就来介绍一下如何实现。
首先，我们需要在CSS中使用background-size属性来设置图片的宽高。此属性用于指定背景图像的大小，可以接受的值有cover、contain、宽度值和高度值等。
如果我们要按原比例设置图片的宽高，我们可以使用如下的代码：

.my-image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
} 

说明一下这里的属性：
- background-size：设置图片的大小，将其缩放到适应元素的大小，但不超过原始大小。
- background-repeat：不重复背景图像。
- background-position：使图片居中显示。
这样，我们就可以按原比例设置图片的宽高了。需要注意的是，图片必须作为元素的背景才能使用这种方法。
除此之外，我们还可以使用img标签来显示图片，并使用max-width属性来设置最大宽度。这样可以让图片在容器过小时自动缩小，但不会改变比例。具体代码如下所示：

.my-image img {
  max-width: 100%; /* 设置最大宽度 */
  height: auto; /* 自适应高度 */
} 

这里的max-width属性将图片的最大宽度设置为父容器的宽度，这样当容器缩小时，图片自动缩小，但不会改变比例。而height:auto属性则可以根据图片宽度自动计算高度，保证图片不会变形。
总之，无论是使用background-size属性还是max-width属性，我们都可以非常方便地实现图片宽高按原比例设置。这样不仅可以让页面更美观，还可以保证图片的质量，给用户带来更好的体验。