I'm working on a very simple css slider for use on a website. It works fine so far.
As long as I size my images appropriately ahead of time images display fine.
If I use an untouched image it takes a section of the top left corner based on the width and height settings in the css file.
Is it possible to have the image resized automatically?
CSS code:
/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */
body{background:#000;}
.container{
margin:50px auto;
width:700px;
height:200px;
overflow:hidden;
border:10px solid;
border-top-color:#ffffff;
border-left-color:#dddddd;
border-bottom-color:#ffffff;
border-right-color:#dddddd;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;
}
@keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:5s;}
img:nth-child(2){animation-delay:10s;}
img:nth-child(1){animation-delay:15s;}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 27 May 2015 17:56:02 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<link rel="stylesheet" href="css/slider1.css">
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<img class='photo' src="./img/image1.jpg" alt="" />
<img class='photo' src="./img/image2.jpg" alt="" />
<img class='photo' src="./img/image3.jpg" alt="" />
<img class='photo' src="./img/image4.jpg" alt="" />
</div>
</body>
</html>
Thanks,