Получение высоты изображения до загрузки изображения в HTML

Предварительно загрузите их в объекты изображений javascript, а затем просто укажите высоту и ширину.

Может потребоваться какая-то умная чертовщина, чтобы работать во всех браузерах ...

function getSize(imgSrc){

    var aImg = new Image();

    aImg.src = imgSrc;

    aHeight = newImg.height;
    aWidth = newImg.width;

}

Вы можете:

1. Не указывать высоту div и позволять ему расширяться автоматически

2. После загрузки изображения выполните:

   document.getElementById ("myDiv"). height = document.getElementById ("myImage"). height

Нам понадобится немного больше информации, чтобы быть очень полезным. Вы можете получить высоту и ширину изображения после загрузки страницы с помощью Javascript (Информация), а затем вы можете изменить высоту div после загрузки. В противном случае вам действительно не повезло, поскольку в самом HTML ничего нет.

Если вы используете PHP, есть getimagesize (), который вы можете использовать, если вы создаете сайт динамически с помощью PHP. Есть аналогичные функции для других языков, но нам понадобится немного больше информации.

Если вы пытаетесь динамически изменить размер пары div в строке внутри таблицы, возможно, вам лучше использовать таблицу html вместо этого и иметь каждое изображение в теге td. Это приведет к изменению размера тега tr для изображения в каждой ячейке.

Если вы хотите, чтобы браузер создавал макет на основе высоты изображения, прежде чем он получит изображение, вам необходимо отправить эту высоту куда-нибудь в браузер. Для этого потребуется что-то на стороне сервера. Самым быстрым вариантом было бы вставить его напрямую в HTML. Медленнее, но более элегантно было бы получать его изображение за изображением с помощью операторов <script src =>, которые получают инструкции из специального бита cgi, генерирующего javascript. (Разница в скорости возникает из-за сетевых обходов.)

Если вы хотите изменить размер после получения данных, это намного проще. Либо установите обработчик загрузки на изображения, либо вставьте их в обычную dom (например, в настоящую таблицу, хотя вы можете сделать это с помощью div и css) и позвольте механизму компоновки выполнять эту работу.

На этот вопрос было дано несколько ответов, и вы задали дополнительный вопрос: «Не ухудшит ли это пользовательский интерфейс?»

Ответ на этот вопрос - да. Лучшее, что вы можете сделать в большинстве случаев, - это установить высоту вашего div так, чтобы она выглядела хорошо, а затем масштабировать изображения до нужного размера. Это ускорит рендеринг, а конечный продукт будет выглядеть лучше и профессиональнее.

Но это только мое личное мнение. У меня нет эмпирических данных, подтверждающих это.

  this.img = new Image();
  this.img.src = url;
  alert(this.img.width);

дает ширину, в то время как

  var img = new Image();
  img.src = url;
  alert(img.width);

не ..

не знаю почему.