CSS宽高比100vw或100vh取决于窗口大小

编程问答 2022-06-04

问题描述

我正在尝试放置一个以100vh高和自动宽度为中心的图像 当浏览器窗口的宽度大于图像的纵横比时 当我将浏览器窗口的宽度减小到小于所示图像的宽度时，图像的宽度应为100vw，高度应为auto。始终保持图像的高宽比，以便始终将宽度或高度固定在窗口上，从而完全显示图像。 没有翘曲，并且始终居中在不停靠到窗口的位置。

这是我到目前为止所拥有的。当我可以读取图像的当前位置和大小时，将调整其他3张图像的大小并在“ body onload” JS中重新放置。 是的，我知道我在img和div中使用了class center-fit，但是当我更改它时，升级就开始了

是否也可以使用JS来调整，放置和缩放主img更好？

 <html>
 <head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgBox {
            display: grid;
            height: auto;
        }
        .center-fit {
            max-width: 100%;
            height: 100vh;
            margin: auto;
        }
        .imageOff {
          position: absolute;
          left: 0px;
          cursor: pointer
        }
    </style>
</head>

<body >
<div class="imgBox">
    <div class="center-fit">
        <img src= "https://via.placeholder.com/400x600.png"  class="center-fit"  id="mainImage"  onclick="imgClick()" >
        <img src= "https://via.placeholder.com/100x100.png" class="imageOff"  id="lichtAus" onclick="imgClick()" style="top: 0px" visible="true" >
        <img src= "https://via.placeholder.com/100x100.png" class="imageOff"  id="ledsAus"  onclick="imgClick()" style="top: 100px" visible="true" >
        <img src= "https://via.placeholder.com/100x100.png" class="imageOff"  id="loopAus"  onclick="imgClick()" style="top: 300px" visible="true" >
   </div>
</div> 

</body>

</html>

解决方法

您可以使用object-fit: container;。

查看more details and alternatives 

<html>
 <head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: auto;
        }
        .center-fit {
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          object-fit: contain;
        }
        .imageOff {
          position: absolute;
          left: 0px;
          cursor: pointer
        }
    </style>
</head>

<body >
<div class="imgbox">
    <div class="center-fit">
        <img src= "https://via.placeholder.com/400x600.png"  class="center-fit"  id="mainImage"  onclick="imgClick()" >
        <img src= "https://via.placeholder.com/100x100.png" class="imageOff"  id="lichtAus" onclick="imgClick()" style="top: 0px" visible="true" >
        <img src= "https://via.placeholder.com/100x100.png" class="imageOff"  id="ledsAus"  onclick="imgClick()" style="top: 100px" visible="true" >
        <img src= "https://via.placeholder.com/100x100.png" class="imageOff"  id="loopAus"  onclick="imgClick()" style="top: 300px" visible="true" >
   </div>
</div> 

</body>

</html>

aspect-ratiohtmlviewport