使图像适合屏幕并允许默认缩放行为

Question

我想使图像适合视口，保持纵横比和浏览器的默认缩放行为。 基本上，想要的行为与使用 Chrome 或 Firefox 打开本地图像完全一样。 这是我的项目的详细信息：

我有一个比例为 4896x3264 的巨大 Unsplash 图像
我想创建一种“Waldo 在哪里”游戏，用户必须放大以检查图像的每个细节。 默认情况下，我希望图像适合屏幕（在这种情况下，最大高度为 100%）。 然后用户可以使用 ctrl + 滚动（或任何其他快捷方式）放大/缩小。
它显示在 angular 9 应用程序中，组件的 html 简单地说是： <img src="../../assets/img/Background.webp"/>我使用<router-outlet>访问此 ZFC35FDC70D5FC69D23698 .

所以现在当导航到这个页面时，图像的原始尺寸为 4896x3264，这对于普通屏幕来说太高了。 使用 CSS 我可以设置高度和宽度以相应地适应视口（并将其居中），如下所示：

   img {
      max-height: 100%;
      display: block;
    }

但是，使用此解决方案，我无法再放大查看图像的细节。 即使我放大到 500%，图像也会保持合适（在我的屏幕上为 1536 x 722）。

在浏览器（Chrome 或 Firefox）中打开本地图像时，我获得了所需的确切行为：默认情况下（100% 缩放）它适合 1017x678。 我可以通过单击放大到 4896x3264。 我可以用 ctrl + scroll 逐渐放大。 检查控制台时，我看到放大和缩小时宽度和高度会自动更改： <img style="-webkit-user-select: none;margin: auto;cursor: zoom-in;"src="file:///D:/Videotec/Background.webp" width="1083" height="722">

有没有办法在我的应用程序中获得这种行为？ 我发现了很多关于将带有 css 的图像拟合到视口的主题，但我找不到像我的项目这样的东西。 由于英语不是我的母语，我可能很难搜索 web，如果已经解决了类似问题，请告诉我。

实际行为截图： https://ibb.co/DLChrtp

想要的默认行为截图： https://ibb.co/p0hLDxn

在此先感谢您的帮助。

编辑：我不确定我是否全面描述了想要的行为（我的词汇限制了我）。 检查@NVRM 答案以获取更多详细信息

编辑解决方法：因为我没有找到开箱即用的东西，所以我用 Typescript + CSS 重新创建了该行为。 我的想法只是将 ngClass 从响应式 class（最大高度：100%）切换到没有宽度和高度限制的原始 class。 在我的游戏中，我必须检索精确的 position 单击我也将它与 scrollTo 一起使用，以便将视图集中在所需坐标上。
我不得不使用lifecycleHook AfterViewChecked，因为我需要在切换class 后滚动视图。 我必须使用滚动标志（布尔值），否则当我单击scrollOut 时也会触发scrollTo(x,y)。 我知道这不是一个干净的解决方案（我实际上有比下面更多的代码，处理 dblclick 等其他东西，所以某些部分对你来说可能不是最佳的）但它确实是想要的行为，所以我现在会坚持下去.

在.html

<div #videotecContainer class="videotec-container">
  <img
    #videotecImage
    src="../../assets/img/Videotec.webp"
    [ngClass]="zoomed ? 'zoomedIn' : 'zoomedOut'"
    (click)="onClick($event)"
  />
</div>

输入：

zoomed: boolean = false;
scrolled: boolean = false;
xPosition: number;
yPosition: number;
@ViewChild("videotecImage", { static: true }) videotecImage: ElementRef;
@ViewChild("videotecContainer", { static: true }) videotecContainer: ElementRef;

onClick(event: any) {
     const coordinates = this.getPixelPositions(event);
     this.xPosition = coordinates.px - coordinates.clientWidth / 2;
     this.yPosition = coordinates.py - coordinates.clientHeight / 2;
     this.zoomImage();
 }

zoomImage() {
    if (this.zoomed && this.scrolled) this.scrolled = false;
    this.zoomed = !this.zoomed;
  }

ngAfterViewChecked() {
    if (this.zoomed && !this.scrolled) {
      this.videotecContainer.nativeElement.scrollTo(
        this.xPosition,
        this.yPosition
      );
      this.scrolled = true;
    }

getPixelPositions(event) {
  //do some calculation based on Wolfgang Fahl answer here : 
  //questions/34867066
}

在.css：

.zoomedOut {
  max-height: 100%;
  max-width: 100%;
  display: block;
  margin: auto;
}

.zoomedIn {
  display: block;
}

#videotecImage {
  overflow: scroll;
}
   
.videotec-container {
  height: 100vh;
  overflow: scroll;
  background-color: black;
}

Answer 1

不确定，如果这是你所追求的？ 但基本上，一个 div 背景和一个固定的 witdh，使用一个不响应的绝对单位（如 px），几乎是缩放时的默认行为，它也会缩放图像吗？

单击«整页»查看它与缩放的作用。

 div { height: 100vh; background-image: url("https://i.imgur.com/p2dQlq7.jpg"); background-size: 500px auto; background-repeat: no-repeat; }

 <body> <div></div> </body>

使图像适合屏幕并允许默认缩放行为

问题描述

1 个解决方案

解决方案1
0 2020-07-14 17:18:49

使图像适合屏幕并允许默认缩放行为

问题描述

1 个解决方案

解决方案1 0 2020-07-14 17:18:49

解决方案1
0 2020-07-14 17:18:49