CSS 调整图像大小以适应 div 无拉伸

在前端开发中，经常会遇到需要将图像插入到一个固定大小的 <div> 元素中，让图像自适应 <div> 的大小，而不产生拉伸或压缩的情况。本文将介绍如何使用 CSS 实现这个需求。

方法一：使用 background-image

一种简单的做法是将图像作为 <div> 的背景图片，用 background-size 属性设置背景图像的宽度和高度，让其自适应 <div> 元素。

#myDiv {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url('/path/to/image.png');
}

以上 CSS 规则将 <div> 元素的大小设置为宽度为 300px，高度为 200px。background-repeat: no-repeat 属性确保背景图片不会重复。background-position: center center 属性让背景图片在 <div> 元素中居中。background-size: contain 属性让背景图片保持比例自适应 <div> 元素，如果图片比 <div> 小则显示完整，如果图片比 <div> 大则缩放。

方法二：使用 <img> 元素

另一种做法是将图像作为普通的 <img> 元素插入到 <div> 中，用 CSS 控制 <img> 的大小和位置。

<div id='myDiv'>
  <img src='/path/to/image.png' alt=''>
</div>

#myDiv {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

#myDiv img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}

以上代码将 <div> 元素的大小设置为宽度为 300px，高度为 200px。overflow: hidden 属性确保 <img> 元素不会超出 <div> 元素。position: relative 属性让 <img> 元素相对于 <div> 元素进行定位。

<img> 元素使用了绝对定位和 transform 属性调整位置。position: absolute 属性让 <img> 元素相对于父元素（即 <div> 元素）进行定位。top: 50%; 和 left: 50%; 属性将 <img> 元素定位到父元素的中心。transform: translate(-50%, -50%); 属性将 <img> 元素向左和向上移动图片自身宽度和高度的一半，使其中心重合。

<img> 元素使用 max-width: 100%; 和 max-height: 100%; 属性限制图片大小，让其自适应 <div> 元素。如果图片比 <div> 小，则显示原图大小；如果图片比 <div> 大，则缩放至最大为 <div> 的大小。

以上两种方法都可以实现将图像大小自适应一个固定大小的 <div> 元素。具体使用哪种方式取决于实际需求和个人喜好。