html5 - How can I make a HTML/CSS Slideshow Fill the screen as a background when pictures are different sizes? -


i have tried many ways keep running problem of have small pictures want cover page without replicating. images in simple cross fading slideshow made of html , css. if knows solution please help. code here https://www.codecademy.com/bytesurfer77914/codebits/lg1o3g/edit

body {     font-family: "helveticaneue-light", "helvetica neue light", "helvetica neue", helvetica, arial, "lucida grande", sans-serif;     font-weight: 300;   }   .css-slideshow {     min-width: 1024px;     min-height: 100%;     width: 100%;     height: auto;   }   .css-slideshow figure {     margin: 0;     width: 100%;     min-height: 100%;     background: #;     position: fixed;   }   .css-slideshow img {     box-shadow: 0 0 2px #666;     width: 100%;     height: 100%;   }   .css-slideshow figcaption {     position: absolute;     top: 0;     color: #fff;     background: rgba(0, 0, 0, .3);     font-size: .8em;     padding: 8px 12px;     opacity: 0;     transition: opacity .5s;   }   .css-slideshow:hover figure figcaption {     transition: opacity .5s;     opacity: 1;   }   .css-slideshow-attr {     max-width: 495px;     text-align: right;     font-size: .7em;     font-style: italic;     margin: 0 auto;   }   .css-slideshow-attr {     color: #666;   }   .css-slideshow figure {     opacity: 0;   }   figure:nth-child(1) {     animation: xfade 48s 42s infinite;   }   figure:nth-child(2) {     animation: xfade 48s 36s infinite;   }   figure:nth-child(3) {     animation: xfade 48s 30s infinite;   }   figure:nth-child(4) {     animation: xfade 48s 24s infinite;   }   figure:nth-child(5) {     animation: xfade 48s 18s infinite;   }   figure:nth-child(6) {     animation: xfade 48s 12s infinite;   }   figure:nth-child(7) {     animation: xfade 48s 6s infinite;   }   figure:nth-child(8) {     animation: xfade 48s 0s infinite;   }   @keyframes xfade {     0% {       opacity: 1;     }     10.5% {       opacity: 1;     }     12.5% {       opacity: 0;     }     98% {       opacity: 0;     }     100% {       opacity: 1;     }   }
<!doctype html>  <html>    <head>    <link rel='stylesheet' href='style.css' />    <script src='script.js'></script>  </head>    <body>    <div class="css-slideshow">      <figure>        <img scr="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xft1/v/t1.0-9/11696006_552542634884522_6974810122332336734_n.jpg?oh=dc9f855a26758a984d62764398a993b5&oe=561d8818" alt="class-header-css3" class="alignnone size-full wp-image-172" />        <figcaption></figcaption>        </figure>      <figure>        <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xtp1/v/t1.0-9/11698916_549988971806555_4844839813799871571_n.jpg?oh=494882d5e67135ad9ca19325272049dd&oe=56197441" alt="class-header-semantics" class="alignnone size-full wp-image-179" />        <figcaption></figcaption>      </figure>      <figure>        <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xtp1/v/t1.0-9/11707540_553121584826627_9134683716038424767_n.jpg?oh=d262e8103383780cf894371fbd3660c5&oe=56191f45" alt="class-header-offline" class="alignnone size-large wp-image-178" />        <figcaption></figcaption>      </figure>      <figure>        <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xat1/v/t1.0-9/11692694_552316594907126_8150294442120674585_n.jpg?oh=d1b1c34e04e3d76623a1c71a3740e98f&oe=5612dbbc" alt="hike1" class="hike10" />        <figcaption></figcaption>      </figure>      <figure>        <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xtp1/v/t1.0-9/11011897_554257658046353_2992577499490719642_n.jpg?oh=16bf71549ec783130c57c53aac6a0cd6&oe=5622a3ba" alt="hike" class="alignnone size-large wp-image-176" />        <figcaption></figcaption>      </figure>      <figure>        <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/10846061_548303745308411_6417320283077954578_n.jpg?oh=39836d991c85c44e5a07b12425df4781&oe=562742ba" alt="class-header-multimedia" class="alignnone size-large wp-image-175" />        <figcaption></figcaption>      </figure>      <figure>        <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/10644879_450777305061056_6728861527484189803_n.jpg?oh=c706542ae39e77541fa279f424cf2303&oe=561ca391" alt="class-header-3d" class="alignnone size-large wp-image-174" />        <figcaption></figcaption>      </figure>      <figure>        <img src="https://scontent-atl1-1.xx.fbcdn.net/hphotos-xtp1/v/t1.0-9/10398022_450320015106785_2038216740372010379_n.jpg?oh=7ddda1c9e3f524da0f93100b4cddb4b2&oe=565121a3" alt="class-header-performance" class="alignnone size-large wp-image-173" />        <figcaption></figcaption>      </figure>    </div>    </body </html>

try code 

.css-slideshow img{   box-shadow: 0 0 2px #666;   min-width: 100%;   min-height: 100%; }

although should not stretch images smaller.


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more