javascript - 更改img的高度，使其与jQuery的宽度保持一定的长宽比

我有一幅需要更改jQuery尺寸的图像。图片宽度应与其父div的宽度相同。父div是一个响应列容器，因此它的宽度是dynamic（fluid）。更改图像宽度后，还应将高度更改为与图像宽度有关的纵横比为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>

最佳答案

我尚未测试您的代码，但这是您想要的吗？

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

关于javascript - 更改img的高度，使其与jQuery的宽度保持一定的长宽比，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26555821/