我是 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);
};
}
就像我说的，我是新手，所以请让我知道我做错了什么，以及如何达到我想要的效果。
最佳答案
你不需要jquery。只需设置一个类名，然后在样式表中使用宽度。如果您仅设置宽度，它将自动调整高度以保持纵横比。仅设置高度也是如此。如果您同时设置，您的宽高比可能会关闭。宽度可以是当前元素的百分比。您还可以使用 vw(视口(viewport)宽度)。计算器也非常有帮助。
{ 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>关于javascript - jQuery photoResize 函数不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37370788/