Responsive design and height!

HTML & CSS
1

More and more am I trying to make responsive websites, but I keep struggling with the height property. Right now for example I’m working on a slideshow with, for now the following properties:


#slideshow {
  width: 100%;
  height: 650px; /* I actually don't want to use the height in px */
  position: absolute;
  left: 0;
  top: 0;
  z-index: s1;
  background: #FF0000;
}

.slide {
  width: 100%;
  height: 100%;
  position:absolute;
  z-index:8;
  background-color: #FFF;
}

#slideshow .slide img {
  max-width: 100%;
  height: 100%;
  min-width: 1600px;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}



<div id="slideshow">
  <div class="slide active">
    <img class="slide-image" src="slideshow_photos/photos/home1.jpg">
  </div>
  <div class="slide">
    <img class="slide-image" src="slideshow_photos/photos/home2.jpg">
  </div>
  <div class="slide">
    <img class="slide-image" src="slideshow_photos/photos/home3.jpg">
  </div>
</div>

As i commented would I like to avoid using pixels as units so the slideshow will become responsive. What would be the best method to accomplish this when seeing my CSS and HTML?

Thank you in advance!

2

Do not define the height with the width. I guess the height should automatically adjust with the content inside it. Remove height: 650px; and then check out what are the results. Use a tool like chrome inspector to check out.

3

Hi,

You can use the percentage padding trick I showed you in the other thread.

Or just use one of the many responsive slideshows that are about.