Question

我是jQuery的新手，我还在学习HTML和CSS。我希望在我的网站主页上有一个响应式图像，用户的浏览器窗口缩放。我在github上找到了这个：https://github.com/gutierrezalex/photo-resize.git 但我想我可能会错误地使用它，因为我无法让它为我工作。这是我的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>

这里是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);

   };
}

就像我说的，我是一个新手，所以请让我知道我做错了什么，以及我如何达到我想要的效果。

Answer 1

你不需要jquery。只需设置一个类名，然后在样式表中使用宽度。如果您只设置宽度，它将自动调整高度以保持纵横比。同样适用于设置高度。如果设置两个宽高比可能会关闭。宽度可以是当前元素的百分比。您也可以使用vw（查看端口宽度）。 calc也非常有帮助。

{ width:75%}

<强>更新

.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

这是代码：

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：

<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：

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 个答案: