首页 文章

使用css和jquery调整图像大小后的图像高度？

提问于
浏览 次
3

我有点卡住了 . 我正在用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 body {padding：0;保证金：0;位置：相对;溢出：隐藏; } .bg {width：100％;位置：绝对;顶部：0;左：0; z-index：1; } #content {position：relative; z-index：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();


});

任何有关如何获得图像实际高度的帮助都会很棒！非常感谢！

jquery css image resize

3 回答

  • 0

    在加载图像时尝试调用高度（并且应始终将代码括在 $(function() {}); 中，以便在DOM准备好时调用代码）

    $(function() {
   $('#img1').load(function() {
       $("#content").append($(this).height());
   });
});
    回复于
  • 1

    这是我在stackflow上找到的类似线程的答案..希望它有所帮助！

    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.
    });
    回复于
  • 0

    我使用这个公式，得到原始图像的比例高度/宽度

    var ratio=originalImageHeight/originalImageWidth;
var newHeight=newWidth * ratio;
    回复于

相关问题