javascript - 使用 jQuery 更改 img 高度，使其与宽度具有一定的纵横比

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);