Получить высоту изображения после изменения размера изображения с помощью CSS и JQuery? - PullRequest
Новая
       1

Получить высоту изображения после изменения размера изображения с помощью CSS и JQuery?

3 голосов
/ 23 февраля 2012

Я немного застрял. Я создаю вращающееся фоновое изображение с помощью jquery и css. Я изменяю ширину изображения в соответствии с размером браузера, но я не хочу изменять высоту, потому что это искажает изображение. Поэтому я хочу сделать простое математическое уравнение, чтобы изображение было центрировано по центру экрана. Например: исходное изображение имеет размер 1600px, а его размер - 1200px, мне нужно получить высоту изображения с измененным размером. Я пробовал это с простой jquery: $ ("# img1"). Height (); но он возвращает значение 0. Вот мои jquery, HTML и CSS:

HTML 

<div id="div2"><img src="images/1.jpg" class="bg" id="img1" /></div>
<div id="div3"><img src="images/1-blur.jpg" class="bg"/></div>
<div id="content">Body Content goes here!!</div>

<script>
var iheight = $("#img1").height();
$("#content").append(iheight);
</script>

CSS тело { отступы: 0; поле: 0; положение: относительное; переполнение: скрытое; } .bg { ширина: 100%; положение: абсолютное; верх: 0; слева: 0; z-индекс: 1; } #content { положение: относительное; z-индекс: 999; }

и Jquery для поворота изображений: 

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

$("#div3").fadeIn(3000, function(){
    $(this).delay(2000).fadeOut(2000);
    $("#div2").fadeIn(3000, function(){
        $(this).delay(2000).fadeOut(2000);
});
});

}
setInterval(function() {
      startfade();
}, 6000);


startfade();


});

Любая помощь в том, как узнать фактическую высоту изображения, будет потрясающей! Большое вам спасибо!

Ответы [ 3 ]

1 голос
/ 23 февраля 2012

Попробуйте вызвать высоту, когда изображение загружено (и вы всегда должны заключать свой код в $(function() {});, чтобы ваш код вызывался, когда DOM готов) 

$(function() {
   $('#img1').load(function() {
       $("#content").append($(this).height());
   });
});
0 голосов
/ 14 июня 2015

Я использую эту формулу, получая соотношение высота / ширина исходного изображения 

var ratio=originalImageHeight/originalImageWidth;
var newHeight=newWidth * ratio;
0 голосов
/ 23 февраля 2012

Это ответ по аналогичной теме, найденной мной в стеке. Надеюсь, это поможет! 

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });
...