我想为一个只有一张图片的网站提供一个HTML CSS解决方案。我有以下要求:
[我有一个解决方案,其中我可以通过使用window.screen.width * window.devicePixelRatio通过js获取浏览器窗口的大小,请参阅Link,但它不适用于所有设备。如果我正在使用类似的内容,则无法放大:
<img style="width:100%;" src="https://images8.alphacoders.com/712/712496.jpg">
是否有一个CSS解决方案或js解决方案,但没有获得适用于所有设备和浏览器的像素宽度?
您可以使用复选框类型输入来查看用户是否单击了。当用户单击时,复选框进入选中状态,因此我们可以使用以下纯CSS解决方案。这里使用的宽度单位是'vw'(平均视口宽度),它基本上是客户端查看窗口的宽度。
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">
希望这项工作有效:)