javascript - 使用 CSS、HTML 和 Javascript 在随机图像的页面上调整图像大小

标签 javascript jquery html css image

这是我给你的问题。

我有一个页面,其中使用一些手写的 Javascript 代码放置了随机图像。前提是图片大小不一。

现在我想显示图像,以便它占据大部分屏幕 ( style="width: 95%;") 或者图像不会调整到比它自己的最大尺寸更高的尺寸。所以本质上图像总是完全显示(至少在水平方向上)。

我不想做的是对图像位置以外的任何内容进行硬编码。所以我想以某种方式动态获取最大尺寸并强制页面识别它们。

我一直在寻找 Javascript(以及建议的 JQuery)函数和 CSS 代码来管理我正在寻找的内容,但无济于事。部分问题可能是我没有找到可靠的可读资源,我在学校学到了一些东西,但老实说我对我要找的东西没有正确的线索。现在,当我看到我的选择时,我觉得我的要求无法完成。

但是我在这里提出了问题。并粘贴我到目前为止的代码。欢迎任何建议、修改和帮助。我不知道,也找不到。

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<script type="text/javascript" src="./js/jquery-1.8.1.min.js">
<script type="text/javascript">
var links = ['./img/1-teech.png', './img/2-slingshot.png', './img/3-upright.jpg', './img/4-drawing.png', './img/5-wing.png', './img/6-flying.png', 'img/7-filly.png'];
var credits = ['Pencils', 'Pencils', 'Eljordo', 'Ezynell', 'Laydee Kaze', 'Yu Chie', 'Honey Puff'];
function setRandomImage()
{
setImage(getRandomInt(links.length - 1));
}

function setImage(var i)
{
document.getElementById('tichimage').src = links[i];
document.getElementById('credits').innerHTML = credits[i];
}

function getRandomInt(max)  
{  
  return Math.floor(Math.random() * (max + 1));  
} 
</script>
</head>

<body>
<p align="center"><img src="" alt="Tich" style=" width: 95%;" id="tichimage"/></img>     <br /></p>
<p align="center">By <span id ="credits"></span></p>
<p align="center"><img src="./img/random-button.png" alt="Random Image" onclick="setRandomImage()"/></p>
<script type="text/javascript">
setRandomImage();
</script>
</body>
</html>

我意识到并非我所做的一切都完全 100% 符合网络标准,但是嗯嗯。它被设计成更像是一个测试页面,供我在其中做一些事情,我自己做了一些以前的事情。但我现在想要的东西似乎太难了。而且我不知道该去哪里。

感谢帮助

最佳答案

这是一个工作示例,它将捕获图像的高度宽度并将其分配给一个变量:http://jsfiddle.net/charlescarver/BrwAj/2/

var img = new Image();
img.src = $("#tichimage").attr("src");
img.onload = function() {
    var width = this.width;
    var height = this.height;
}

关于javascript - 使用 CSS、HTML 和 Javascript 在随机图像的页面上调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12327085/

相关文章:

javascript - 第二次尝试时无法选中复选框

javascript - 我想在不使用类或 ID 的情况下定位下一个同级父级中的子元素

javascript - 滚动到特定标签

javascript - Notification.requestPermission 在 Mac 版本的 Safari 中抛出错误

html - 垂直对齐 anchor 内的图像

html - 迁移到新的虚拟主机时出现意外的空格和不正确的样式

html - PDF 不呈现 Html Css ASP.NET

javascript - 根据回归系数在散点图上绘制回归线

javascript - JS parseInt() 返回 0

javascript - 如何实现带分页的目录