Question

我有一个图像，我需要改变jQuery的维度。图像宽度应与其父div的宽度相同。父div是响应列容器，因此它的宽度是动态的（流体）。一旦改变图像的宽度，高度也应该改变为与图像宽度相对应的16：9的纵横比的值。因此，让我们说列宽为1920 ...图像高度将为1080.如何修改我的代码来执行此操作？

$(document).ready(function(){

    $('#featured-articles').find('.featured').each(function(){
        var slide = $(this);
        $(this).find('img[rel="featured_preview"]').each(function(){
            var new_width = slide.width();
            var new_height = ?????
            $(this).prop("width", new_width).prop("height", new_height);
        });
    });

});

<div id="featured-articles">
     <div class="featured">
          <img src="slide.jpg" rel="featured_preview">
     </div>
     <div class="featured">
          <img src="slide2.jpg" rel="featured_preview">
     </div>
</div>

Answer 1

我还没有测试过您的代码，但这是您想要的吗？

var new_height = Math.round(new_width*9/16);

Answer 2

将width: 100%;添加到您的img css中。这自然保持了原始图像的纵横比（这假设您的原始图像的比例为16：9 - 这是一个非常有效的假设，因为您不应该拉伸/压缩图像）

img {
    width: 100%;
}

JSFiddle Demo

Answer 3

这里有一个简单的例子：

html代码：

    <div id="test" style="width:300px">
        <img src="http://placehold.it/300x300" />    
   </div>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

javascript代码（使用jquery）：

        var aspectRatio = 9/16; 
        $('#test img').css('width','100%');
        var imgWidth = $('#test img').css('width');

        // we have to remove the suffix px in imgWidth otherwise we will get 
        // a NaN value when we attempt to use that value in arithmetic 
        // operations

        imgWidth = imgWidth.replace('px','');  

        // above the image width is converted from percentage format(%) to a 
        // static value for example 300px

        var newHeight = imgWidth*aspectRatio;


        $('#test img').css('height',newHeight+'px');
        console.log(imgWidth+'\n');
        console.log(newHeight);

您可以尝试示例jsfiddle

使用jQuery更改img高度，使其与某个宽高比达到它的宽度

3 个答案: