Блог

У меня есть таблица, которая динамически создается с помощью DIVs. Каждая строка таблицы содержит два изображения. Я хочу установить высоту div (которая представляет определенную строку) на высоту изображения, которое больше двух изображений, отображаемых в этой конкретной строке. Отображаемые изображения всегда будут меняться, и они взяты с внешнего сервера.

Как мне установить высоту для моего div, чтобы я мог помещать изображения?

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

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

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

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

это не так..

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

Ты можешь:

1. Не указывайте высоту div и позвольте ему автоматически расширяться
2. Как только изображение будет загружено, сделайте:

   document.getElementById(«myDiv»).высота = document.getElementById(«Мое изображение»).высота

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

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

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

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

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

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

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

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

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

 function getSize(imgSrc){

    var aImg = new Image();

    aImg.src = imgSrc;

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

}