How to make an image the full width of a screen with dictating the height

Question

I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.

Can anyone suggest something to help this?

My slider can be viewed at: http://realtorcatch.com/slider3

My code is:

* {
    padding: 0;
    margin: 0;
}
body {
    font-family: Sans-Serif;
}
img {
    max-width: 100%;
    /*height: 70vh;*/
}
.cycle-slideshow {
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
}
.cycle-prev, .cycle-next {
    font-size: 200%;
    color: #FFF;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    z-index: 999;
    cursor: pointer;
}
.cycle-prev {
    left: 10%;
}
.cycle-next {
    right: 10%;
}
.cycle-pager {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    bottom: 20px;
    z-index: 999;
    cursor: pointer;
}
.cycle-pager span {
    text-indent: 100%;
    white-space: nowrap;
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin: 0 10px;
    overflow: hidden;
}
.cycle-pager .cycle-pager-active {
    background-color: #FFF;
}
<div class="cycle-slideshow">
    <span class="cycle-prev">&#9001;</span>
    <span class="cycle-next">&#9002;</span>
    <span class="cycle-pager"></span>
    <img src="images/subway.jpg" alt="subway">
    <img src="images/beach.jpg" alt="beach">
    <img src="images/space.jpg" alt="space">
</div>

Answer 1

On your img declaration, instead of max-width set width to 100% and height to 70vh . If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.

Be warned, this will skew your images and make them look disproportionate.

Alternate solution:

Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:

.cycle-slideshow {
    position: relative;
    ...
}

.cycle-slideshow:after {
    content: '';
    width: 100%;
    height: 50%; //50% of parent element
    background-color: white;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
}

Answer 2

change style of img to img {width: 100%; height: 100vh;}

It will work for you. Thank you.

Answer 3

try this,, Hope it will help you.

var vHeight = $(window).height()/2,  // for 50%
vWidth = $(window).width(),