Ошибка отображения нескольких изображений в Google Chrome, а не в Firefox с symfony 4

ProgramBox

Ошибка отображения нескольких изображений в Google Chrome, а не в Firefox с symfony 4

Post author:admin
Запись опубликована:20 мая, 2023
Post category:Вопросы по программированию

#php #html #css #symfony #twig

#php #HTML #css #symfony #twig

Вопрос:

Для проекта я должен отображать несколько изображений в модальном режиме (Bootstrap), но у меня есть реальная ошибка отображения между Firefox и Google Chrome.

Для проекта мы используем Symfony 4 и TWIG.

Я не понимаю, почему отображение отличается между Chrome и Firefox, я надеюсь, у вас есть ответ на это.

Здесь вы можете увидеть ошибку в Google Chrome

Здесь вы можете увидеть изображения в Firefox

Код HTML

 {% extends 'base.html.twig' %}

{% block title %}Cadena{% endblock %}

{% block main %}
    <div class="d-flex flex-row">
        <div class="d-flex flex-column">
            <h2>{{ dm.getNote }} points</h2>
            {% if image is not null %}
            <img usemap="#piece" class="img-fluid" class="img-fluid" src="{{ asset('picsStorage/'~image) }}" width="450">
            {% else %}
            <img usemap="#piece" class="img-fluid" src="{{ asset('enseignant/img/roomview.png') }}" width="450">
            {% endif %}
            <map name="piece" id="piece">
                {% for s in salle %}
                    {% if s.type == 'cadena' %}
                    <area shape="rect" coords="{{ s.coordobjet }}" href="#" type="button" data-toggle="modal" data-target="#cadena" alt="Contact" />
                    {% else %}
                    <area shape="rect" coords="{{ s.coordobjet }}" href="/etudiant/partie/{{ dm.getIddm }}/{{ s.idobjet }}" alt="Contact" />
                    {% endif %}
                {% endfor %}
            </map>
        </div>

        <div class="d-flex flex-column" style="margin:10px;">

        {% if cadena.getNbessai > 1 %}
            <h3>
                {{ cadena.getNbessai }} / {{ cadena.getNbessaimax }} tentatives
            </h3>
        {% else %}
            <h3>
                {{ cadena.getNbessai }} / {{ cadena.getNbessaimax }} tentative
            </h3>
        {% endif %}

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">
            Voir la carte des pieces
        </button>

        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Carte</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">amp;times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="d-flex flex-column" style="margin:10px">
                            {% for s in allRoom %}
                            <div class="d-flex flex-row" style="margin:10px">
                                {% if idSalleCourant == s.getIdsalle %}
                                    <h3 style="margin-right:10px; color:blue">{{ s.getNomsalle }}</h3>
                                {% else %}
                                    <h3 style="margin-right:10px">{{ s.getNomsalle }}</h3>
                                {% endif %}
                                {% if s.getImagesalle is not null %}
                                    <img width= 200px class="img-fluid"  src="{{ asset('picsStorage/'~s.getImagesalle) }}" >
                                {% else %}
                                    <img width= 200px class="img-fluid" src="{{ asset('enseignant/img/roomview.png') }}">
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                    </div>
                </div>
            </div>
        </div>

        {% if autoriser %}
        <div class="alert alert-warning" role="alert" style="margin:20px">
                Il n'y a aucun cadena trouver ici !
        </div>
        {% else %}
        <div class="modal fade" id="cadena" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Le cadena</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">amp;times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{ form_start(form) }}
                        {{ form_widget(form) }}
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {% if error is defined and error_type is defined %}
            <div class="alert alert-{{ error_type }}" role="alert">
                {{ error }}
            </div>
        {% endif %}
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: {{ (1/nbSalle)*100 }}%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>


{% endblock %}

Код PHP

      /**
     * @Route("/etudiant/partie/{idDm}", name="jouepartie")
     */
    public function jouepartie($idDm, Request $request)
    {
        $dm = $this->getDoctrine()->getRepository(Dm::class)->find($idDm);
        $s = $this->getDoctrine()->getRepository(Salle::class)->getRoomByDM($idDm);
        $nbSalle = $this->getDoctrine()->getRepository(Salle::class)->getNbSalle($idDm);

        $em = $this->getDoctrine()->getManager();

        $dm = $em->getRepository(Dm::class)->find($idDm);
        $s = $this->getDoctrine()->getRepository(Salle::class)->getRoomByDM($idDm);

        //id salle courant : $s[0]["idsalle"]
        $autorisePlacerCadena = $this->getDoctrine()->getRepository(Salle::class)->autorisationPlacerCadena($s[0]["idsalle"]);

        if (sizeof($s) > 0)
        {
            $cont = $em->getRepository(Contient::class)->findOneBy([
                "iddm" => $dm->getIddm(),
                'idsalle' => $s[0]["idsalle"],
            ]);
            $room = $this->getDoctrine()->getRepository(Salle::class)->find($s[0]["idsalle"]);
            $lsObj = $room->getIdobjet();

            $link = $this->getDoctrine()->getRepository(EstLierA::class)->findBy([
                'idsalle' =>  intval($s[0]["idsalle"]),
                'iddm' => intval($idDm)
            ]);

            $form = $this->createFormBuilder();

            $cpt = 0;
            foreach ($link as $enigme) {
                $cpt =1;
                dump($enigme);
                $form->add($enigme->getIdenigme()->getIdenigme(), TextAreaType::class, array("label"=>$enigme->getIdenigme()->getNomenigme(), "attr" => array("style"=>"margin:5px;","class" => "form-control")));
            }

            $form-> add ('save', SubmitType::class, array('label'=>'Valider', "attr" => array("style"=>"margin:5px;","class" => "btn btn-primary")));
            $recup = $form->getForm();
            $recup->handleRequest($request);
            if($recup->isSubmitted() amp;amp; $recup->isValid())
            {
                if ($dm->getIdgr()->getIdpush() != $this->getUser()->getNetu())
                {
                    return $this->render('partie/index.html.twig', [
                        'dm' => $dm,
                        'image' => $s[0]["imagesalle"],
                        'salle' => $s,
                        'lsObj' => $lsObj,
                        'form' => $recup->createView(),
                        'nbSalle' => $nbSalle,
                        'error' => "Vous n'êtes pas le chef de groupe !",
                        'allRoom' => $dm->getIddev()->getIdsalle(),
                        'idSalleCourant' => $s[0]["idsalle"],
                        'autoriser' => $autorisePlacerCadena,
                        'error_type' => "danger",
                        'cadena' => $cont->getIdcadena(),
                    ]);
                }
                else
                {
                    $cadena = $cont->getIdcadena();
                    $valEnigme = 0;
                    foreach ($link as $enigme)
                    {
                        $rep = $recup->get($enigme->getIdenigme()->getIdenigme())->getData();
                        if($rep != $enigme->getIdenigme()->getSolution())
                        {
                            if($cont->getIdcadena()->getNbessai() <= $cont->getIdcadena()->getNbessaimax() - 1)
                            {
                                $cont->getIdcadena()->setNbessai($cont->getIdcadena()->getNbessai()   1);
                                $em->flush();   
                            }

                            return $this->render('partie/index.html.twig', [
                                'dm' => $dm,
                                'image' => $s[0]["imagesalle"],
                                'salle' => $s,
                                'lsObj' => $lsObj,
                                'form' => $recup->createView(),
                                'allRoom' => $dm->getIddev()->getIdsalle(),
                                'idSalleCourant' => $s[0]["idsalle"],
                                'nbSalle' => $nbSalle,
                                'autoriser' => $autorisePlacerCadena,
                                'error' => "Reponse invalide !",
                                'error_type' => "danger",
                                'cadena' => $cont->getIdcadena(),
                            ]);
                        }

                        $valEnigme  = ($enigme->getIdenigme()->getMaxpoint()) * (($cadena->getNbessaimax() - $cadena->getNbessai()) / $cadena->getNbessaimax());
                    }

                    $dm->setNote($dm->getNote()   $valEnigme);
                    $cont->getIdcadena()->setEtatc(TRUE);
                    $em->flush();
                    return $this->redirectToRoute('jouepartie',  ['idDm' => $dm->getIddm()]);
                }

            }

            return $this->render('partie/index.html.twig', [
                'dm' => $dm,
                'image' => $s[0]["imagesalle"],
                'idSalleCourant' => $s[0]["idsalle"],
                'salle' => $s,
                'lsObj' => $lsObj,
                'allRoom' => $dm->getIddev()->getIdsalle(),
                'form' => $recup->createView(),
                'autoriser' => $autorisePlacerCadena,
                'cadena' => $cont->getIdcadena(),
                'nbSalle' => $nbSalle,
            ]);
        }
        if(! is_null($dm))
        {
            $valPts = $dm->getNote();
            $resultatFinal = ($dm->getNote() * 20) / $dm->getIddev()->getMaxpoint();
            $dm->setNote($resultatFinal);

            $this->addFlash('success', "Vous avez fini la partie avec ".$valPts." pts !");
            return $this->redirectToRoute('pageAccueil');
        }        

        $this->addFlash('danger', "La partie est déjà fini !");
        return $this->redirectToRoute('pageAccueil');

    }

Глобальный CSS

 body
{
    font-family: sans-serif;
}

#main
{
    margin-top: 5em; 
}

#dragThis {
    width: 8em;
    height: 8em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1em 1em 1em;
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);
}

#dropHere {
    width: 20em;
    height: 20em;
    padding: 0.5em;
    border: 3px solid #f90;
    border-radius: 1em;
    margin: 0 auto;
}

.lsEnigme>li
{
  list-style:none;
}

.box>ul
{
    list-style:none;
    margin-left:0;
    padding-left:0;
    color: white;
}

.box {
    height: 100px;
    width: 100px;
    background-color: black;
    position: relative;
    top: 5px;
    left: 5px;
    cursor: pointer;
  }

  .held {
    border: solid 10px black;
    background-color: black;
  }

  .holder {
    height: 110px;
    width: 110px;
    margin: 10px;
    border: solid 5px black;
    background-color: white;
    display: inline-block;
  }

  .hovered {
    border: dotted 5px black;
  }

  .invisible {
    display: none;
  }

  #container {
    margin: auto;
    top: 100px;
    width: 400px;
    position: relative;
  }

  #editRoom
  {
    display: flex;
    flex-wrap: wrap;
  }

  #dropZone
  {
    flex: 1 1 60%;
    display: flex;
    flex-wrap: nowrap;
  }

  #lsObject
  {
    margin: 20px;
    flex: 1 1 20%;
    display: flex;
    flex-wrap: wrap;
  }

  .dragElement
  {
    background-color: red;
  }

  .label-file {
    padding: 10px;
      cursor: pointer;
      color:white;
      background-color: #F7230C;
      font-weight: bold;
  }
  .label-file:hover {
      color: black;
  }

  .input-file {
      display: none;
  }

  #room {position:absolute;z-index:1;}

  #img
  {
    display:inline-block;
    width:500px; 
    height:500px;
    margin: 0 auto; 
    position:relative; 
    border-radius: 10px; 
  }

  #myCanvas
  {
    position:relative;
    z-index:20;
  }

Ответ №1:

Некоторые браузеры более строго относятся к высоте и ширине <img> тегов. Если вы не знаете высоту, установите для нее значение auto:

 .img-fluid {
  height: auto;
}

Вопрос:

Код HTML

Код PHP

Глобальный CSS

Ответ №1:

Вам также может понравиться

Как применить дополнительные свойства: false ко всем объектам?

Хаскелл. Как реализовать пользовательский монадный трансформатор с использованием GADT?

Как проверить журналы консоли (ИНФОРМАЦИЯ) с помощью инструмента автоматизации Katalon