クロスフェード画像の整列

私は非常に新しい& cssです。私は私のウェブサイトにホバリング画像を追加しようとしています。私はこれを管理しました。しかし、すべての画像が同じサイズで同じく中心にあるであることを希望します。より良いはずのボタンを使用して画像を自動的に変更する方法を知っている人は、です。クロスフェード画像の整列

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<style> 


body { 
    background-color: lightblue; 


} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover { 
    background-color: #111; 
} 


img { 
    position: absolute; 
    margin: 5px; 
    border: 1px solid #ccc; 
    width: 180px; 
} 


img img { 
    width: 100%; 
    height: auto; 


} 

      img:nth-of-type(1){ 
       -webkit-animation: fadeInOut 10s linear 6s infinite; 
      } 
      img:nth-of-type(2){ 
       -webkit-animation: fadeInOut 10s linear 4s infinite; 
      } 
      img:nth-of-type(3){ 
       -webkit-animation: fadeInOut 10s linear 2s infinite; 
      } 
      img:nth-of-type(4){ 
       -webkit-animation: fadeInOut 10s linear infinite; 
      } 

/* Keyframes - WebKit only ------------------------------------------ */ 


      @-webkit-keyframes fadeInOut{ 

      0% { opacity:1; } 
      17% { opacity:1; } 
      25% { opacity:0; } 
      92% { opacity:0; } 
      100% { opacity:1; } 

      } 

</style> 
</head> 
<title>Badass Burgers</title> 

<body> 



<ul> 
    <li><a class="active" href="info.php">About</a></li> 
    <li><a href="about.php">Team</a></li> 
    <li><a href="Menu.php">Menu</a></li> 
    <li><a href="contact.php">Contact Us</a></li> 

</ul> 
<img src='food1.jpg'> 
     <img src='Food2.jpg'align="middle"> 
     <img src='Food3.jpg' align="middle"> 
     <img src='food4.jpg'align="middle"> 


</body> 
</html>

出典

2016-04-03 chris

すべての画像を同じサイズにする場合は、画像ごとに固定幅と高さを設定する必要があります。

画像を特定のコンテナに集中させるには、以下のCSSを使用します。

<div class="image-wrapper"> 
    <img class="image" src='http://lorempixel.com/400/200/' width="200" height="175" /> 
</div>

CSS

.image-wrapper { 
    position: relative; 
    height: 500px; // change to whatever works for you 
} 

.image { 
    position: absolute; 
    top: 50%; 
    border: 1px solid #ccc; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
}

EXAMPLE

を参照してください。

出典

2016-04-03 12:51:34 aphextwix

クロスフェード画像の整列

答えて

関連する問題