對齊交叉漸變圖像

我很新的HTML & 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

對齊交叉漸變圖像

回答

相關問題