Auto sizing Images in a CSS Slider

User 629250 Photo


Registered User
50 posts

Hello,

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,
User 629250 Photo


Registered User
50 posts

To my surprise I have discovered that pure css sliders are not supported in all "Phone Browsers". Special coding is required for each of the browsers. Firefox is ahead of the curve but Chrome and Opera lag behind. I read that this won't always be the case. I'll wait. Java based sliders seem to be the best solution at this time.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.