使用 jquery 和 javascript 来改变图像的大小答案

【问题标题】：using jquery and javascript to change the size of an image使用 jquery 和 javascript 来改变图像的大小
【发布时间】：2016-04-11 02:35:06
【问题描述】：

首先让我说我对 javascript 和 jquery 的了解很短。我目前正在关注这些主题的教程。话虽如此，我想知道是否可以使用 jquery 更改图像的大小。例如，我有一个代码`这可以很好地显示图像，但尺寸有时大有时小。我在这里查看了一些文章https://blog.openshift.com/day-16-goose-extractor-an-article-extractor-that-just-works/ 有这个代码；

<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript">
    $("#myform").on("submit", function(event){
        $("#result").empty();
        event.preventDefault();
        $('#loading').show();
        var url = $("#url").val()
        $.get('/api/v1/extract?url='+url,function(result){
            $('#loading').hide(); 
            $("#result").append("<h4>"+result.title+"</h4>");
            $("#result").append("<img src='"+result.image+"' height='300' width='300'</img>");
            $("#result").append("<p class='lead'>"+result.text+"</p>");
    })


    });

</script>

我感兴趣的是"#result").append("<img src='"+result.image+"' height='300' width='300'</img>");我能用我的代码 {{post.image}} 做同样的事情吗？ `

【问题讨论】：

好吧。您可能希望这些数字由脚本提供，但这需要知道图像的原始分辨率。它是通过 AJAX 传递的吗？如果没有，那就做吧。
您可以将<img> 标签包裹在<div> 标签内。然后你可以将<div>的宽度和高度设置为你想要的数量，将<img>的宽度和高度设置为100%。
@DaMaGeX，我想我有点明白你的意思，你能提供一些例子吗...不知道 img 标签如何在 div 标签内
@ShangWang 我很困惑 - 您可以在 Django 模板中使用 javascript，请参阅我的答案。

标签： javascript jquery python django

【解决方案1】：

您可以在 Django 模板中将{{ post.image }} 与您的 javascript 混合使用而不会出现任何问题。

例如，您可以在 Django 模板中执行此操作：

<script type="text/javascript">
  var image = "{{post.image}}";
  // Beginning of the javascript implementation here.
  $("#result").append("<img src='"+image+"' height='300' width='300'</img>");
  // More javascript.
</script>

【讨论】：

是的，当我对此发表评论时，我失去了理智，但我想责任不属于答案。您还需要一些更正，它是带有引号的 var image = "{{post.image}}";。