image style not working after injected html img src tag

Que Tal!

Could someone help me with this topic?

I have a web with a slider in front that presents 5 fixed images and which I want to assign with a random index. As I move down the page, I have another gallery of 20 images. In both cases I am interested in randomly replacing each image by refresh (f5) or by a button; with their respective titles and comments.

I'm currently working with the first element of the slider, and with a little help, it already inserts the HTML corresponding to the title in this case the "p" tag also includes img src, both assigned by innerHTML in a random way.

The problem is that when replacing the HTML, the image is reduced to 1/8, that is, it does not cover the screen with the indicated height. It's as if I was taking the size of the images in the second gallery. "p" works perfectly at the indicated size without problems. Both elements are chosen in a random way correctly.

You want to use JavaScript. conserving css, html5 and bootstrap. For more clarity visit: cienciaybelleza.com

I will appreciate any help.

Thank you in advance.

For the slider there are 5 divs like the following, each one with a "p" and an "img src", which must be replaced using an index generated in a random way, according to the function that is attached.

  <div class="slide">
    <div id="layera">
    <p>Ingresar</p>
    <img src="assets/images/imgslide/slideb1.jpg">
    </div>
  </div>

  <div class="slide">
    <p>Ingresar</p>
    <img src="assets/images/imgslide/slideb1.jpg">
  </div>

This is the function:

function getlayer(){

  var idx = Math.floor(Math.random() * 7);        //get array index selector
  var layera = document.getElementById("layera");
  layera.innerHTML='<p>' + captiona[idx] + '</p> <img src="' + slidea[idx] + '">';
 };

With a slider style defined for class="slide"

At the moment I'm only working with the first element and therefore I defined a div id="layera" in order to do the substitution of HTML in the function.

The result of the function is as follows; that is, what is generated is:

Hello!

  <div class="slide">
    <div id="layera"><p>Hola!</p> <img src="assets/images/imgslide/slidea2.jpg"></div>
  </div>

Almost everything works only that the image is not taking the style assigned by the slider to 100%, in the others

.slider{
    overflow: hidden;
    height: 568px;
}

.slider figure div{
    width: 20%;
    float: left;
}

.slider figure img{
    width: 100%;
    float: left;
}

The gallery (second case and below the slider) has div elements similar to:

        <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-12 filter hdpe">
            <a href="http://www.economista.com.mx" target="_blank"><img src=ropa\assets\images\parras_2400_800_.jpg class="img-responsive">
            <a><small>Conoce nuestras opciones</small></a>
        </div>

        <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-12 filter hdpe">
            <img src="http://fakeimg.pl/365x365/" class="img-responsive">
        </div>

I will appreciate any help

Thanks in advance