vue 图片展示如何控制图片的大小并保证图片不会变形

你可以使用 CSS 的 `object-fit` 属性来控制图片的大小并保证图片不会变形，同时配合 `width` 和 `height` 属性来设置图片的具体大小。具体操作如下：

HTML 代码：

<div class="image-container">
  <img src="your-image-url.jpg" alt="your-image">
</div>

CSS 代码：

.image-container {
  width: 300px; /* 设置容器的宽度 */
  height: 200px; /* 设置容器的高度 */
  overflow: hidden; /* 隐藏图片超出容器的部分 */
}

.image-container img {
  width: 100%; /* 设置图片的宽度为容器的宽度 */
  height: 100%; /* 设置图片的高度为容器的高度 */
  object-fit: cover; /* 图片铺满容器，并保持比例不变 */
}

这样就可以控制图片的大小并保证图片不会变形了。如果你想让图片在容器内居中，可以使用 `object-position` 属性来控制图片的位置，例如：

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* 图片在容器中居中显示 */
}