Crossfading Bilder ausrichten

Ich bin sehr neu in HTML & css. Ich versuche, meiner Website schwebende Bilder hinzuzufügen. Das habe ich geschafft. Allerdings möchte ich alle meine Bilder von der gleichen Größe und auch zentriert sein. Wenn jemand weiß, wie man die Bilder automatisch mit Tasten ändert, wäre das besser.Crossfading Bilder ausrichten

<!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>

Quelle

2016-04-03 chris

Wenn Sie möchten, dass alle Bilder die gleiche Größe haben, müssen Sie für jedes Bild eine feste Breite und Höhe festlegen.

Um die Bilder in einem bestimmten Container zu zentrieren, können Sie das folgende CSS verwenden.

<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%); 
}

Siehe EXAMPLE

Quelle

2016-04-03 12:51:34 aphextwix

Crossfading Bilder ausrichten

Antwort

Verwandte Themen