Question

我正在我的网站上工作，我一直在设计一台三星22英寸显示器。我没有玩过调整窗口大小，只是基本上用全屏窗口设计我的网站。现在我在我的主页上制作了一个图像滑块，我注意到当我调整窗口大小时，滑块中的图像缩小而保持纵横比但是我创建的滑块中的图像在全屏模式下保持适当的尺寸保持不变当我调整窗口大小时，它会弄乱布局。除了改变边距之外，我对图像上的CSS没有做太多的工作，但是在调整窗口大小时，我可以用css告诉图像缩放图像。

我的图片的CSS代码

.project-section  img{
   display:inline;
   margin-top: -18px;
   margin-bottom: -5px;
   margin-left: -8px;
}

我的图像滑块的css代码我从一个我仍在尝试理解的教程中获得但是这里的图像在调整窗口大小时会缩放。

          @keyframes slidy {
           0% { left: 0%; }
           20% { left: 0%; }
           25% { left: -100%; }
           45% { left: -100%; }
           50% { left: -200%; }
           70% { left: -200%; }
           75% { left: -300%; }
           95% { left: -300%; }
          100% { left: -400%; }
            }


  div#slider { overflow: hidden; }
  div#slider figure img { width: 20%; float: left; }
  div#slider figure { 
   position: relative;
   width: 500%;
   margin: 0;
   left: 0;
   text-align: left;
   font-size: 0;
   animation: 40s slidy infinite; 
 }

Answer 1

通过指定宽度或高度（取决于您知道的那个）来保持与CSS的比率的图像缩放，并将另一个设置为auto。如果您的响应式设计要求图像宽度为480px，那就是：

width: 480px;
height: auto;

如何使我的图像可缩放并同时保持其宽高比？

1 个答案: