使用 javascript 调整图像大小

鲁道夫·阿尔瓦雷斯占位符图像

我正在测试使用 javascript 调整图像大小。我正在使用Flask,我的htlm代码如下:

    {% extends "base.html" %}
    {% import "bootstrap/wtf.html" as wtf %}
    {% block title %} - Home{% endblock %}
    {% block page_content %}

        <div class="page-header">
            <h1> Rubbish bags collected since 2016 </h1>
        </div>

        <div>
            <img id="rubbish" src="{{ url_for('.fig') }}" alt="Rubbish bags">
        </div>

        <p>Click the button to get the ID of the image.</p>

        <button onclick="myFunction()">Try it</button>

        <p id="demo"></p>

     {% endblock %}
     {% block scripts %}
     {{ super() }}
     {% endblock %}

该图像由Flask 视图函数生成用于检查图像 ID的函数“myFunction()”如下:

    function myFunction() {
        var x = document.getElementById('rubbish').id;
        document.getElementById('demo').innerHTML = x;
    }

当我点击myFunction()时,ID图像的结果是垃圾,正如预期的那样。但是,当我尝试通过更改窗口大小来访问图像以更改with属性时,没有任何反应。这是javascript代码:

    $(function() {
        if($(window).width() < 500)
        var parentwith = $('rubbish').parent().css('width');
    $('rubbish').css('width', parentwith);
    });

任何想法 ?

杰里米·蒂尔
if($(window).width() < 500)
    var parentwith = $('rubbish').parent().css('width'); // Should be  $('#rubbish')

// If window's width is >= 500, here you'll get a "parentwith is undefined" error
$('rubbish').css('width', parentwith); 

但是为什么要将 Javascript ( document.getElementById('rubbish')) 和 jQuery ( $("#rubbish")) 混合在一起呢?

...但是,为什么要这样做,只是为了将图像的宽度设置为其父级的宽度?一个简单的 CSS 媒体查询做同样的事情并且执行速度更快:

@media (max-width: 500px){
    img#rubbish {
       width : 100%;
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用PHP直接从URL调整图像大小

来自分类Dev

使用CSS调整大小和裁剪图像

来自分类Dev

如何使用PHP批量调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用javascript调整图像大小

来自分类Dev

使用URL调整WordPress中图像的大小

来自分类Dev

在Ubuntu上使用convert调整图像的大小

来自分类Dev

如何使用Bootstrap调整图像大小

来自分类Dev

调整NSAttributedString中使用的图像的大小

来自分类Dev

使用空白来源调整图像大小

来自分类Dev

使用位图调整大图像大小的OutOfMemoryException

来自分类Dev

使用createjs / easyljs调整图像大小

来自分类Dev

如何使用Jquery / javascript根据视图端口大小调整图像大小

来自分类Dev

上传前使用画布调整图像大小

来自分类Dev

使用Pillow Python调整图像大小

来自分类Dev

使用AlamofireImage调整下载图像的大小

来自分类Dev

使用CSS调整图像的裁剪部分的大小

来自分类Dev

使用ionic或angular9在Base64中对大型图像进行编码/调整大小(不使用Javascript)

来自分类Dev

使用ImageMagick和CloudConvert调整图像大小

来自分类Dev

如何使用python下载调整大小的图像?

来自分类Dev

如何使用javascript调整多个图像的大小并使用ajax保存在mysql中

来自分类Dev

使用CSS Grid调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用imagemagick调整图像大小

来自分类Dev

使用CSS / Javascript进行自适应图像大小调整/裁剪

来自分类Dev

使用Java调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

javascript图像地图大小调整问题

来自分类Dev

如何在使用 Javascript 提交图像之前在 Django Imagefield 中调整图像大小

Related 相关文章

热门标签

归档