Home / Questions / 232189
Accepted
Andrés Vélez
Asked: 2020-01-24 14:47:26 +0800 CST 2020-01-24 14:47:26 +0800 CST

Prevent image from wrapping

  • 772

I'm doing a bootstrap fade carousel but when passing the image it sort of fits, I've tried to delete divs, change different styles and nothing works, I'm going to pass you the url since it's not possible to upload videos, I appreciate it if you can help me. http://seadoglabs.com/iq/pru/

It's on the right side, those images rotate.

Here are two screenshots to see the same in the url it looks better.

I don't know if it can be seen here but in this image it will barely fit after changing the carousel image. enter image description here

And in this he already settled enter image description here

codes: view:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="8350">
    <div class="carousel-fade carousel-congratulations">
      <!-- AQUI VAN LAS FELICITACIONES -->
      <div id="contenedor">
        <div class="loader" id="loader">Loading...</div>
      </div>
    </div>
  </div>

Js(upload what is obtained from the controller)

function realizaProceso(){
  var parametros = {};
  $.ajax({
    data:  parametros,
    url:   'controller/index.php',
    type:  'post',
    dataType: 'json',
    beforeSend: function () {
    },
    error: function (request, status, error) {
         console.log(request);
         console.log(status);
         console.log(error);
    },
    success:  function (response) {
      $(".loader").hide();
      $(".carousel-congratulations").html(response.congratulations);
      window.history.pushState("", "", '/iq/pru/');
    }
  });
}

Controller:

       $sentencia = $con->prepare("SELECT * FROM congratulations ORDER BY id ASC;");
    $sentencia->execute([1]);
    $result = $sentencia->fetchAll(PDO::FETCH_OBJ);
    $estado ="active";
    $congratulations = "<div class='container'>";
    /*$congratulations = '<div class="carousel-item '.$estado.'">';
    $congratulations .= '<div class="not-item">';
    $congratulations .= '<img src="admin/images/congratulation/'.$picture->congratulation.'" />';
    $congratulations .= '</div></div>';*/
    $contador=0;
    //$estado="";
    foreach($result as $fila) {
        $congratulations .= '<div class="carousel-item '.$estado.'" style="background: transparent;">';
        $estado="";
        $col_image=($fila->image==NULL) ? "default.png" : "felicitaciones/homenajeado".$fila->id."/".$fila->image ;
        $col_title=$fila->title;
        $col_detail=$fila->detail;
        $congratulations .= '<div class="card" style="background: transparent;">';
        $congratulations .= '<div class="card-body">';
        $congratulations .= '<p class="card-title">'.$col_title.'</p>';
        if( $col_title!=="<!--Empty-->")
            $congratulations .= '<p class="card-card-text">'.$col_detail.'</p>';
        $congratulations .= '<div class="img-cum fleft sin-border"><img class="img-l" src="admin/images/'.$col_image.'" style="'.$fila->css.'"/></div>';
        $congratulations .= '</div></div></div>';
        $contador++;
    }
    $congratulations .= '</div>';
header("Content-type: application/json; charset=utf-8");

//Guardamos los datos en un array
$datos = array(
'congratulations' => $congratulations
);

echo json_encode($datos, JSON_FORCE_OBJECT);

In the images look that the container has a black border with that it is seen when the image is being accommodated, on the site it is noticeable.

html

1 Answers

  1. Best Answer

    In your CSS styles change this:

    .carousel {
    position: relative;
}

    For this:

    .carousel {
    position: absolute;
}

    Then you must accommodate the div class="gal"within the div class="todos-t fleft"so that it is located below the textIQ para todos

    • 1