时间戳

首页 > 解决方案 > html css - 可以缩放全尺寸图像和视图

javascript - html css - 可以缩放全尺寸图像和视图

问题描述

我想为只有一张图片的网站提供 html css 解决方案。我有以下要求：

  1. 如果用任何浏览器打开网站，那么图片的宽度=浏览器窗口的宽度
  2. 你可以放大图片

我有一个解决方案，我通过 js 使用 window.screen.width * window.devicePixelRatio 查看Link来获取浏览器窗口的大小，但它不适用于所有设备。如果我使用类似的东西，我不能放大：

<img style="width:100%;" src="https://images8.alphacoders.com/712/712496.jpg">

是否有一个 css 解决方案或一个 js 解决方案，而没有获得适用于所有设备和浏览器的像素宽度？

标签： javascripthtmlcsswidthzooming

解决方案

您可以使用复选框类型输入来查看用户是否已单击。当用户单击时，复选框进入选中状态，因此我们可以使用以下纯 CSS 解决方案。这里使用的宽度单位是“vw”（表示视口宽度），它基本上是客户端查看窗口的宽度。

*{
  margin: 0;
}

img{
  width: 100vw;
}

.toggle{
  position: fixed;
  height:100%;
  width: 100%;
  z-index: 2;
  opacity: 0;
}
     
.toggle:checked+img{
  width: 200vw;
}
<input type=checkbox class="toggle">
<img src="https://images8.alphacoders.com/712/712496.jpg">

希望这有效:)

推荐阅读