当前位置：首页 > VUE

vue实现图片自适应

2026-02-25 02:48:10VUE

使用 CSS 实现图片自适应

在 Vue 中，可以通过 CSS 的 object-fit 属性实现图片自适应。object-fit 可以控制图片在容器中的填充方式，常用值包括 cover（保持比例填充整个容器）、contain（保持比例完整显示）等。

<template>
  <div class="image-container">
    <img :src="imageUrl" class="responsive-image" alt="自适应图片">
  </div>
</template>

<style>
.image-container {
  width: 100%;
  height: 300px; /* 根据需求调整高度 */
  overflow: hidden;
}

.responsive-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 或使用 contain */
}
</style>

使用 Vue 指令动态计算宽高

如果需要根据容器动态计算图片尺寸，可以自定义 Vue 指令。以下示例通过指令监听容器尺寸变化并调整图片。

<template>
  <div v-image-fit class="image-wrapper">
    <img :src="imageUrl" alt="动态适应图片">
  </div>
</template>

<script>
export default {
  directives: {
    imageFit: {
      inserted(el) {
        const img = el.querySelector('img');
        const resizeObserver = new ResizeObserver(() => {
          img.style.width = `${el.offsetWidth}px`;
          img.style.height = `${el.offsetHeight}px`;
          img.style.objectFit = 'cover';
        });
        resizeObserver.observe(el);
      }
    }
  }
}
</script>

结合响应式布局

在响应式场景下，可以使用 CSS 媒体查询和 Vue 的动态类名结合实现不同屏幕尺寸的适配。

<template>
  <div :class="['image-box', { 'mobile-layout': isMobile }]">
    <img :src="imageUrl" alt="响应式图片">
  </div>
</template>

<style>
.image-box {
  width: 100%;
}

.image-box img {
  width: 100%;
  height: auto;
}

.mobile-layout img {
  max-height: 200px; /* 移动端特殊处理 */
}
</style>

使用第三方库（如 v-lazy-image）

对于懒加载和自适应场景，可以使用 v-lazy-image 等第三方库简化实现。

安装库：

npm install v-lazy-image

示例代码：

vue实现图片自适应

<template>
  <v-lazy-image
    :src="imageUrl"
    :src-placeholder="placeholderUrl"
    class="responsive-img"
  />
</template>

<style>
.responsive-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
</style>