four systems Ответов: 0

Изображения галереи Css перекрываются, потому что ширина браузера ограничена

код для галереи изображений при добавлении еще каких-либо изображений перекрытие изображений приводит к ограничению ширины браузера; согласно инструментам разработчика mozilla, ширина браузера составляет 1247, а высота-300

Как можно добавить больше изображений

<html>
    <head>
        <title>Computer Science</title>        
    </head>
    <style>
        .yndr
        {
            float:left;
            animation:droyd 10s infinite;
        }
        .yndroid
        {
            width: calc(500px * 3);            
        }
        .yndroidr
        {
            width: 400px;
            overflow: hidden;
            margin: 150px auto;
            height:300px;
        }
        
        @keyframes droyd
        {
            10%
            {                
             transform: translateX(-420px);             
            }            
            20%
            {                
             transform: translateX(-840px);             
            }
            30%
            {                
             transform: translateX(-1260px);             
            }            
            40%
            {                
             transform: translateX(-840px);             
            }            
        }
    </style>         
    <body>
       <div class="yndroidr">
           <div class="yndroid">
               <div class=yndr><img src="iron.gif" width="400" height="200" alt="cy"/></div>               
               <div class=yndr><img src="airconditioner.gif" width="400" height="200" alt="cy"/></div>               
               <div class=yndr><img src="geyser.gif" width="400" height="200" alt="cy"/></div>               
               <div class=yndr><img src="battery.gif" width="400" height="200" alt="cy"/></div>               
           </div>
       </div>         
    </body>
</html>


Что я уже пробовал:

изменил ширину и размер изображения

Richard MacCutchan

Ширина браузера будет такой же широкой, как и у пользователя. На моем экране это может быть до 1920 пикселей.

0 Ответов