4 replies [Last post]
Emma
Emma's picture
Offline
Enthusiast
Last seen: 8 weeks 3 days ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 144
Points: 26

Hi
I've not coded in some time and am trying to get a slider to work (from W3C) - I want a full width image banner slider, however all the images are showing as stretched and not in proportion, no matter what I've tried...any ideas how to rectify? (images are 940 x 627.)
thanks
Em

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body, html {
    height: 100%;
font-family: Verdana, sans-serif; margin:0
}
.mySlides {display: none}
img {vertical-align: middle; height: 300px;}
 
/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}
 
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
 
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
 
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
 
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
 
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
 
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active, .dot:hover {
  background-color: #717171;
}
 
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
 
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
 
<div class="slideshow-container">
 
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="images/cafe.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="images/cafe2.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="images/cafe3.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>
 
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
 
</div>
<br>
 
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>
 
<script>
var slideIndex = 1;
showSlides(slideIndex);
 
function plusSlides(n) {
  showSlides(slideIndex += n);
}
 
function currentSlide(n) {
  showSlides(slideIndex = n);
}
 
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>
 
</body>
</html> 

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 15 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9679
Points: 3749

I hate this whole idea.

This fixed the stretch for me, but I'm not sure why. It was the first thing to come to mind. So some time long, long ago in a land far, far away, I must have already dealt with this.

I know it's been ages, because early on I realized I hated the damned things. They take up valuable space on the page and nobody, and by nobody I mean not a solitary soul cares to look at it after the first time. So, I stopped allowing them on sites I built.

My test pics are not nearly as large as yours either.

   .mySlides {
	display: none;
	text-align: center;
    }

Note: It is a bad idea to leave the last property's semi-colon off. It is legal, but if you edit your css with an added property, things get screwed up if you forget to add it. It is hard as hell to find sometimes.

gary

AttachmentSize
num0.png 77.42 KB
num1.png 55.08 KB
num2.png 84.55 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Emma
Emma's picture
Offline
Enthusiast
Last seen: 8 weeks 3 days ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 144
Points: 26

Thanks for checking this, I

Thanks for checking this, I added the missing semi colon and extra line of css to centre it but it did not resolve the stretched images for me unfortunately Puzzled

Emma
Emma's picture
Offline
Enthusiast
Last seen: 8 weeks 3 days ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 144
Points: 26

this mi

Actually I think it is the image size...with too big a screen resolution. If I minimise the browser it is responsive and is in scale and not stretched! So with the code fix provided and a bigger image that may resolve it Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 15 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9679
Points: 3749

A little more thought

I think I know why setting the img inline fixed things for me. An image element is inline-replaced, thus defaults to the intrinsic values if not over-ruled. An inline element does not have width or height properties; thus does not distort. This may be a browser specific issue The distortion comes from setting both height and width without considering the aspect ratio. A quick look did not reveal where the image's width was set, but I assume it's in there somewhere. I only saw it on the containing element (I think that's where it was).

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.