个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 08:11:36 25 4
gpt4 key购买 nike

我正在创建一个图片库网站。

首先，我获取屏幕尺寸以适应图像的最大高度 (heightScreen - 100)。然后我计算比例宽度。我使用 text-align : center 将图像水平居中；并垂直显示空跨度:inline-block；垂直对齐:居中；

这确实工作正常。

然后我想在包含图像的框架下方添加图例，为此我使用了一个位置为:相对的 div；我检索 (heightScreen - heightFrame)/2 ，这里有一个问题..

我无法获得第一个加载图像的框架尺寸，但它对其他图像(图像)工作正常

当我的浏览器采用全屏尺寸时，它工作正常，并且在屏幕宽度优于图像宽度时工作正常。

更准确地说，我将图像加载到我应用的框架中height: adaptedHeight, max-width: proportionalWidth 但图像本身有 max-width: 100%，框架的高度不等于 adaptedHeight 但如果屏幕宽度低于图像的 proportionalWidth，则为较低的值。

要查看问题，请将浏览器的宽度设置为低于图像宽度。您还可以看到问题仅针对加载的第一张图像，此外，在加载第一张图像后， $ ( window ).resize(function() {});将图例替换到必须的位置。

代码如下:

索引.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>

测试.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%;
}

测试.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');
}

最佳答案

我终于找到了解决办法。

我在 div 中添加了类 modal-dialog

<div id="cadre_photo">

像这样<div id="cadre_photo" class="modal-dialog">

对于 shown.bs modal 上的事件可以触发，我也认为我在 rezise 窗口事件上做了同样的事情:

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

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

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

关于jquery - 如何在加载第一张照片后获取 div 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29236920/

25 4 0
文章推荐： css - 网页的文本在浏览器中被截断
文章推荐： html - 未呈现基本按钮的 CSS 类
文章推荐： css - @font-face 在 IE Internet Explorer 中不工作
文章推荐： css - 由文本表示的图像 - 它叫什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com