jQuery photoResize函数无法正常工作

Question

I'm new to jQuery and i'm still in the process of learning HTML and CSS. 我是jQuery的新手，我还在学习HTML和CSS。 I wanted to have a responsive image on the homepage of my website that scaled itself with the user's browser window. 我希望在我的网站主页上有一个响应式图像，用户的浏览器窗口缩放。 I found this at github: https://github.com/gutierrezalex/photo-resize.git but i think i might be using it wrong, since i can't get it to work for me. 我在github上找到了这个： https ： //github.com/gutierrezalex/photo-resize.git但我想我可能会错误地使用它，因为我无法让它为我工作。 Here's my html: 这是我的HTML：

<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>

<reference path="jquery-1.5.1.min.js" />
<script src="jquery-photo-resize.js"></script>
<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("img").photoResize()
        });
</script>
</head>

and here's the jquery-photo-resize.js file: 这是jquery-photo-resize.js文件：

function photoResize($) {
"use strict";
$.fn.photoResize = function (options) {

    var element = $(this),
        defaults = {
            bottomSpacing: 10
        };

    function updatePhotoHeight() {
        var o = options,
            photoHeight = $(window).height();

        $(element).attr('height', photoHeight - o.bottomSpacing);
    }

    $(element).load(function () {
        updatePhotoHeight();

        $(window).bind('resize', function () {
            updatePhotoHeight();
        });
    });

    options = $.extend(defaults, options);

   };
}

Like i said, i'm a novice, so please let me know what i'm doing wrong, and how i can achieve my desired effect. 就像我说的，我是一个新手，所以请让我知道我做错了什么，以及我如何达到我想要的效果。

Answer 1

You don't need jquery for this. 你不需要jquery。 Just set a class name and then in your style sheet use a width. 只需设置一个类名，然后在样式表中使用宽度。 If you only set a width it'll auto size the height to maintain the aspect ratio. 如果您只设置宽度，它将自动调整高度以保持纵横比。 Same goes for setting the height only. 同样适用于设置高度。 If you set both your aspect ratio may be off. 如果设置两个宽高比可能会关闭。 The width can be a percentage of the current element. 宽度可以是当前元素的百分比。 You could also use vw (view port width). 您也可以使用vw（查看端口宽度）。 Also calc is super helpful. calc也非常有帮助。

{ width:75%}

Update: 更新：

 .cropper { width: 75px; height: 75px; overflow: hidden; position: relative; } .cropped { width: 100px; position: absolute; left: -12.5px; top: -12.5px; }

 <div class="cropper"> <img class="cropped" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg"/> </div>

Answer 2

Here is code : 这是代码：

CSS : CSS：

.featured { overflow:hidden; 
    border:2px solid #000; 
    position:relative;}
.featured img { width:100%; position:relative;}
#pos_1 { width:200px; height:190px; }
#pos_2 { width:150px; height:250px; }
#pos_3 { width:350px; height:150px; }

HTML : HTML：

<div id="topGallery">

    <article class="featured" id="pos_1">
        <img src="abc.jpd" class="attachment-post-thumbnail wp-post-image" alt="piano" />
    </article>
</div>

Javascript : Javascript：

jQuery(document).ready(function($) {

    ///HOME PAGE - image resizing
        function imageLoaded() {
           var w = $(this).width();
           var h = $(this).height();
           var parentW = $(this).parent().width();
           var parentH = $(this).parent().height();

           //console.log(w + '-' + h + '-' + parentW + '-' + parentH);

           //if (w >= parentW){ //always true because of CSS
               if (h > parentH){
                   $(this).css('top', -(h-parentH)/2);
               } else if (h < parentH){
                   $(this).css('height', parentH).css('width', 'auto');
                   $(this).css('left', -($(this).width()-parentW)/2);
               }
           //}
        }
        $('#topGallery img').each(function() {
            if( this.complete ) {
                imageLoaded.call( this );
            } else {
                $(this).one('load', imageLoaded);
            }
        });
});

jQuery photoResize函数无法正常工作

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-05-22 05:17:22

解决方案2
0 2016-05-22 06:24:52

jQuery photoResize函数无法正常工作

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-05-22 05:17:22

解决方案2 0 2016-05-22 06:24:52

解决方案1
0 已采纳 2016-05-22 05:17:22

解决方案2
0 2016-05-22 06:24:52