Question

我正在创建图片库的网站。

首先我得到屏幕尺寸以适应图像的最大高度（heightScreen - 100）。然后我计算比例宽度。我用text-align：center水平对齐图像; 并且垂直显示空跨度显示：inline-block; vertical-align：middle;

这确实可以正常工作。

然后我想在包含图像的帧的正下方添加图例，因为我使用了一个位置为div的div;我检索（heightScreen - heightFrame）/ 2，这里有一个问题..

我无法获得第一个加载图片的框架尺寸，而其他图片则可以正常工作（图片）

当我的浏览器采用全屏尺寸时，工作正常，并且工作正常，而屏幕宽度在图像宽度上更胜一筹。

更准确地说，我将图像加载到我应用的帧中 height：adaptationHeight，max-width：proportionalWidth但是图像本身的最大宽度：100％，帧的高度不等于adaptationHeight，但如果屏幕宽度在图像的proportionalWidth处较差，则为较低的值。

要查看问题，请将浏览器的宽度设置为宽度低于图像宽度。您还可以查看问题仅适用于第一个加载的图像，而且，在加载第一个图像后，$（window）.resize（function（）{}）;在必要的地方替换传说。

以下是代码：

的index.php

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="bootstrap-3.2.0-dist/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="bootstrap-3.2.0-dist/css/bootstrap-theme.min.css" />

  <link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
  <button id="buttonTest" type="button" class="btn btn-success">Success</button>

  <div id="content">
    <div id="modal_photo" class="modal fade">
      <span class="span_cadre_photo"></span><!-- 
   --><div id="cadre_photo">
        <img src="">
        <a id="bouton_precedent" class="left carousel-control" href="#carousel" role="button">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a id="bouton_suivant" class="right carousel-control" href="#carousel" role="button">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <div id="legende_photo">
        <div>
          <h4></h4>
        </div>
      </div>
    </div>
  </div><!-- id="content" -->

  <script type="text/javascript" src="Js/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="Js/test.js"></script>
</body>
</html>

test.css

html,body, h4
{
  margin: 0;
  padding: 0;
}

html, body
{
  height: 100%;
}

#content
{
  height: 100%;
  text-align: center;
}

#modal_photo
{
  height: 100%;
}

.span_cadre_photo
{
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

#cadre_photo
{
  background: white;
  position: relative; /* pour que les spans restent dans le cadre */
  display: inline-block;
  vertical-align: middle;
}

img
{
  max-width: 100%;
  max-height: 100%;
}

#legende_photo
{
  position: relative;
}

#legende_photo div
{
  background: white;
  display: inline-block;
  max-width: 100%;
}

test.js

var largeurEcran, hauteurEcran, photoSelectionnee, nombrePhotos;

$( document ).ready (function() {

  getDimensionEcran();

  $ ( window ).resize(function() {
    var hauteurCadre, positionTopLegende;
    hauteurCadre = $( '#cadre_photo' ).height();

    // alert("$ ( window ).resize():  hauteurCadre : " + hauteurCadre);
    // alert("hauteurEcran : " + hauteurEcran);
    // alert("largeurEcran : " + largeurEcran);

    positionTopLegende = ((hauteurEcran - hauteurCadre) / 2);
    // alert("positionTopLegende : " + positionTopLegende);

    $( '#legende_photo' ).css({
      'top': - positionTopLegende
    });
  });

  //Clique sur une photo
  $( '#buttonTest' ).on ('click', function() {
    photoSelectionnee = 1;
    nombrePhotos = 4;

    // alert("largeurEcran : " + largeurEcran);
    // alert("hauteurEcran : " + hauteurEcran);

    afficherModal();
  });

  //Clique sur le bouton précédent du modal
  $( '#bouton_precedent' ).click(function() {
    photoSelectionnee -= 1;
    afficherModal();
  });

  //Clique sur le bouton suivant du modal
  $( '#bouton_suivant' ).click(function() {
    photoSelectionnee += 1;
    afficherModal();
  });

  // A l'apparition du modal
  $( '#modal_photo' ).on('show.bs.modal', function() {
    // alert("on show.bs.modal");
    // var hauteurCadre = $( '#cadre_photo' ).height();
    // var largeurCadre = $( '#cadre_photo' ).width();
    // alert("on show.bs.modal hauteurCadre : " + hauteurCadre);
    // alert("on show.bs.modal largeurCadre : " + largeurCadre);
  });

  // A la fin de l'apparition du modal
  $( '#modal_photo' ).on('shown.bs.modal', function() {
    alert("on shown.bs.modal");
    // var hauteurCadre = $( '#cadre_photo' ).height();
    // var largeurCadre = $( '#cadre_photo' ).width();
    // alert("on shown.bs.modal hauteurCadre : " + hauteurCadre);
    // alert("on shown.bs.modal largeurCadre : " + largeurCadre);
  });
});

// $( window ).load(function() {

// });

function getDimensionEcran()
{
  largeurEcran = $(window).width();
  hauteurEcran = $(window).height();
}

function afficherModal()
{
  // alert("afficherModal()");
  // alert("photoSelectionnee : " + photoSelectionnee);
  // alert("nombrePhotos : " + nombrePhotos);

  var cheminImage, legende;

  cheminImage = 'Img/';
  // legende = 'test de legende';
  legende = 'test de legende legende legende legende legende legende legende legende legende legende legende legende legende legende legende';

  if (photoSelectionnee == 0)
  {
    photoSelectionnee = nombrePhotos;
  }
  else if (photoSelectionnee == nombrePhotos + 1)
  {
    photoSelectionnee = 1;
  }

  var hauteurPhoto, largeurPhoto, hauteurAdaptee, largeurProportionelle, hauteurCadre, positionTopLegende;

  $( '#modal_photo img' ).load(function() {


    hauteurPhoto = this.height;
    largeurPhoto = this.width;

    hauteurAdaptee = hauteurEcran - 100;
    // largeurProportionelle = Math.floor((largeurPhoto * hauteurAdaptee) / hauteurPhoto);
    largeurProportionelle = (largeurPhoto * hauteurAdaptee) / hauteurPhoto;

    positionTopLegende = (hauteurEcran - hauteurAdaptee) / 2;
    hauteurCadre = $( '#cadre_photo' ).height();

    if (hauteurCadre > 0)
    {
      positionTopLegende = ((hauteurEcran - hauteurCadre) / 2);
    }

    // alert("hauteurEcran : " + hauteurEcran);
    // alert("largeurEcran : " + largeurEcran);
    // alert("hauteurPhoto : " + hauteurPhoto);
    // alert("largeurPhoto : " + largeurPhoto);
    // alert("hauteurAdaptee : " + hauteurAdaptee);
    // alert("largeurProportionelle : " + largeurProportionelle);
    // alert("hauteurCadre : " + hauteurCadre);
    // alert("positionTopLegende : " + positionTopLegende);

    $( '#cadre_photo' ).css({
      'heigth': hauteurAdaptee,
      'max-width': largeurProportionelle
    });

    $( '#legende_photo' ).css({
      'top': - positionTopLegende
    });

    $( '#legende_photo  div' ).css({
      'width': largeurProportionelle
    });
  });

  $( '#modal_photo img' ).attr('src', cheminImage + photoSelectionnee + '.jpg');

  $( '#modal_photo h4' ).empty();
  $( '#modal_photo h4' ).append(legende);

  $( '#modal_photo' ).modal('show');
}

Answer 1

我终于找到了解决方案。

我在div

中添加了类模态对话框

<div id="cadre_photo">

喜欢这个<div id="cadre_photo" class="modal-dialog">

对于shows.bs上的事件模态可能是火，我也这样认为我在rezise窗口事件上做了：

$( '#modal_photo' ).on('shown.bs.modal', function() {
  var hauteurCadre, positionTopLegende;

  hauteurCadre = $( '#cadre_photo' ).height();
  positionTopLegende = ((hauteurEcran - hauteurCadre) / 2);

  $( '#legende_photo' ).css({
    'top': - positionTopLegende
  });
});

如何在第一张照片加载后获得div的高度

1 个答案: