CSS Image Slideshow不适合屏幕尺寸

Question

When I'm creating an Image slideshow it does not crop the slideshow to the browser size correctly, I need it to have the arrows formatted correctly and the image with padding around the edges still.

I've tried changing some widths and heights to 100% but cannot figure out in what combination if any.

 @import url(https://fonts.googleapis.com/css?family=Varela+Round); .slides { padding: 0; width: 1000px; height: 690px; display: block; margin: 0 auto; position: relative; } .slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slides input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 1000px; height: 690px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out; } .slide img { width: 100%; height: 100%; } .nav label { width: 150px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 650px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center; } .nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, input#img-4:checked ~ .nav-dots label#img-dot-4, input#img-5:checked ~ .nav-dots label#img-dot-5, input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8); } 

 <section class="story-area bg-seller color-white pos-relative"> <div class="pos-bottom triangle-up"></div> <div class="pos-top triangle-bottom"></div> <div class="container"> <div class="heading"> <img class="heading-img" src="images/heading_logo.png" alt=""> <h5><b>Check out our</b></h5> <h2>Gallery</h2> </div> <ul class="slides"> <input type="radio" name="radio-btn" id="img-1" checked /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-222.jpg" /> </div> <div class="nav"> <label for="img-6" class="prev">&#x2039;</label> <label for="img-2" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-2" /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-214.jpg" /> </div> <div class="nav"> <label for="img-1" class="prev">&#x2039;</label> <label for="img-3" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-3" /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-262.jpg" /> </div> <div class="nav"> <label for="img-2" class="prev">&#x2039;</label> <label for="img-4" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-4" /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-297.jpg" /> </div> <div class="nav"> <label for="img-3" class="prev">&#x2039;</label> <label for="img-5" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-5" /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-293.jpg" /> </div> <div class="nav"> <label for="img-4" class="prev">&#x2039;</label> <label for="img-6" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-6" /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-084.jpg" /> </div> <div class="nav"> <label for="img-5" class="prev">&#x2039;</label> <label for="img-1" class="next">&#x203a;</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> <label for="img-4" class="nav-dot" id="img-dot-4"></label> <label for="img-5" class="nav-dot" id="img-dot-5"></label> <label for="img-6" class="nav-dot" id="img-dot-6"></label> </li> </ul> <h6 class="center-text mt-40 mt-sm-20 mb-30"><a href="#" class="btn-primaryc plr-25"><b>SEE TODAYS MENU</b></a></h6> </div><!-- container --> </section> 

This should allow me to have a fully working slider with the images fitting the screen accordingly.

Answer 1

"When I'm creating an Image slideshow it does not crop the slideshow to the browser size correctly"

You have defined dimensions of 1000 x 690 pixels for the component .slides and it's children .slide . You would have to make these "responsive" by using a non fixed value (for instance 100vw or 100%, depending on your use-case).

Then each .slide should be identical size to .slides and it should autmatically resize when the viewport changes

Answer 2

You need to make width width:100% to make it full width, Also make body default margin to 0. I have done changes accordingly, please check.

 @import url(https://fonts.googleapis.com/css?family=Varela+Round); body{ margin:0; } .slides { padding: 0; width: 100%; height: 690px; display: block; margin: 0 auto; position: relative; } .slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slides input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 100%; height: 690px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out; } .slide img { width: 100%; height: 100%; } .nav label { width: 150px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 650px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center; } .nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, input#img-4:checked ~ .nav-dots label#img-dot-4, input#img-5:checked ~ .nav-dots label#img-dot-5, input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8); } 

 <section class="story-area bg-seller color-white pos-relative"> <div class="pos-bottom triangle-up"></div> <div class="pos-top triangle-bottom"></div> <div class="container"> <div class="heading"> <img class="heading-img" src="images/heading_logo.png" alt=""> <h5><b>Check out our</b></h5> <h2>Gallery</h2> </div> <ul class="slides"> <input type="radio" name="radio-btn" id="img-1" checked /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-222.jpg" /> </div> <div class="nav"> <label for="img-6" class="prev">&#x2039;</label> <label for="img-2" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-2" /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-214.jpg" /> </div> <div class="nav"> <label for="img-1" class="prev">&#x2039;</label> <label for="img-3" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-3" /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-262.jpg" /> </div> <div class="nav"> <label for="img-2" class="prev">&#x2039;</label> <label for="img-4" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-4" /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-297.jpg" /> </div> <div class="nav"> <label for="img-3" class="prev">&#x2039;</label> <label for="img-5" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-5" /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-293.jpg" /> </div> <div class="nav"> <label for="img-4" class="prev">&#x2039;</label> <label for="img-6" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-6" /> <li class="slide-container"> <div class="slide"> <img src="https://www.tiggis-ribblevalley.co.uk/wp-content/uploads/2014/09/Tiggis-084.jpg" /> </div> <div class="nav"> <label for="img-5" class="prev">&#x2039;</label> <label for="img-1" class="next">&#x203a;</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> <label for="img-4" class="nav-dot" id="img-dot-4"></label> <label for="img-5" class="nav-dot" id="img-dot-5"></label> <label for="img-6" class="nav-dot" id="img-dot-6"></label> </li> </ul> <h6 class="center-text mt-40 mt-sm-20 mb-30"><a href="#" class="btn-primaryc plr-25"><b>SEE TODAYS MENU</b></a></h6> </div><!-- container --> </section>