html css -全尺寸图像和视图可以缩放。
html css -全尺寸图像和视图可以缩放。
提问于 2020-05-19 14:12:00
我想有一个只有一张图片的网站的html css解决方案。我有以下要求：
- 如果使用任何浏览器打开网站，则图片的宽度=浏览器窗口的宽度
- 你可以放大图片
我有一个解决方案，通过使用window.screen.width * window.devicePixelRatio (参见链接 )，通过js获取浏览器窗口的大小，但它并不适用于所有设备。如果我使用这样的东西，我就不能放大：
<img style="width:100%;" src="https://images8.alphacoders.com/712/712496.jpg">
是否有css解决方案或js解决方案，而不获得适用于所有设备和浏览器的像素宽度？
回答 1
Stack Overflow用户
发布于 2020-05-19 14:45:20
您可以使用复选框类型输入来查看用户是否已单击。当用户单击时，复选框进入选中状态，因此我们可以使用以下纯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">
希望这能奏效:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61893200
复制相关文章
相似问题
腾讯云开发者
