vue img 等比例缩放 不失真

可以通过 CSS 中的 `object-fit` 属性来实现等比例缩放图片不失真的效果。

例如，假设你有一个 `img` 元素，你可以通过以下 CSS 代码实现等比例缩放不失真：

img {
  width: 100%; /* 图片宽度为父元素的100% */
  height: auto; /* 图片高度自适应，保持宽高比不变 */
  object-fit: cover; /* 使用 cover 值实现图片缩放，保持图片完全填充元素 */
}

当然，也可以根据具体需求使用其他 `object-fit` 值来实现不同的效果。

相关问题

vue iframe 内部网页的等比例缩放

要在Vue中实现iframe内部网页的等比例缩放，可以按照以下步骤进行：

1. 在父组件中引入子组件，并设置iframe的样式，例如：

<template>
  <div class="parent">
    <iframe ref="iframe" :src="url" frameborder="0" scrolling="no"></iframe>
  </div>
</template>

<style>
.parent {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}
.parent iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

2. 在子组件的mounted生命周期钩子中获取iframe元素，并监听iframe的load事件，获取iframe内部的内容。

mounted() {
  this.$nextTick(() => {
    const iframe = this.$refs.iframe;
    iframe.addEventListener("load", () => {
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      const iframeBody = iframeDoc.querySelector("body");
      // 在这里对iframe内部的内容进行操作，例如缩放等
    });
  });
}

3. 对iframe内部的内容进行缩放，可以使用CSS的transform属性进行缩放，例如：

const iframeWidth = iframe.offsetWidth;
const contentWidth = iframeBody.offsetWidth;
const scale = iframeWidth / contentWidth;
iframeBody.style.transform = `scale(${scale})`;

这样就可以实现iframe内部网页的等比例缩放了。注意，由于跨域问题，可能会导致获取不到iframe内部的内容，需要在服务器端进行配置。

vue-pdf设置缩放比例

要设置Vue-pdf的缩放比例，你可以使用`scale`属性。这个属性接受一个数字，用于指定PDF的缩放级别。

例如，如果你想将PDF缩放到50％的大小，则可以这样写：

<template>
  <div>
    <pdf :src="pdfUrl" :scale="0.5"></pdf>
  </div>
</template>

在这里，我们将`scale`属性设置为0.5，这将使PDF缩小到原来的一半大小。

你还可以使用动态绑定来根据用户的输入或其他条件来设置缩放级别。例如：

<template>
  <div>
    <input type="number" v-model="scaleValue">
    <pdf :src="pdfUrl" :scale="scaleValue"></pdf>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: 'path/to/pdf',
      scaleValue: 1 // 默认为100%大小
    }
  }
}
</script>

在这里，我们使用了一个`input`元素来让用户输入缩放级别，然后将这个值绑定到`scaleValue`变量上。然后，我们将这个变量传递给`pdf`组件，使得用户可以通过输入来控制PDF的缩放级别。