jQuery photoResize函數無法正常工作

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 個解決方案

解決方案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