CSS: Image Responsive full Height no stretching

0
votes

I've been working on practicing making some webpages. Long story short, downloaded a psd from 365psd.com and have been trying to recreate its design, just messing with the theme of it for instance.

I have a carousel that I created using CSS animation with three images. The carousel itself works fine and looks good at full size. Though when I shrink the browser to smaller sizes the images don't stretch its height to fill the entire area so it leaves a large black area under the images prior to the navigation.

Ive tried using Height 100% width auto which DOES work, but the images stretch. I am curious if there is a way to minimize the stretching (or not have any all together). I am okay with the images being cropped but I would like it to remain unstretched if possible.

Github page: https://tsukiyonocm.github.io/Portfolio-Photography-Website/
Github CSS: https://github.com/Tsukiyonocm/Portfolio-Photography-Website/blob/master/css/style.css

Thoughts?

2
csshtml

2 Answers

1
votes

the height in percentage works in relation to the parent, going up the tree.

It is also necessary to set 

.slides {height:100%;}
0
votes

Set it as a background image using "cover" and "vh" in your CSS. Where you have your images for your slides, remove the image tags, and just make the slides divs to act as containers for the backgrounds of each slide and each slides copy.

.slide { 
   width:100vw;
   height:100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.slide__1{
     background: url(images/bg.jpg) no-repeat center center; 
    }
.slide__2{
         background: url(images/bg2.jpg) no-repeat center center; 
    }
.slide__3{
         background: url(images/bg3.jpg) no-repeat center center; 
    }

.slides{
    height:100vh;
    width:100vw;
}

<div class="slides">
    <div class="slide slide__1"><p>Some text</p></div>
    <div class="slide slide__2"><p>Some text</p></div>
    <div class="slide slide__3"><p>Some text</p></div>
</div>

It will scale and crop automatically to always fill full viewport.