通过 Javascript 为图像随机设置宽度和高度
[英]Set width and height for image random by Javascript
问题描述
Something hard to understand for me that, how can I set width and height for the random images when they displayed.
对我来说很难理解的是，当随机图像显示时，如何设置它们的宽度和高度。 Can anyone help me, please?任何人都可以帮助我吗？
This is my code这是我的代码
function randomImage(){ var imagesArray = ['images/person1.jpg', 'images/person2.jpg', 'images/person3.jpg']; var num = Math.floor(Math.random() * 3); document.canvas.src = imagesArray[num]; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Display random image</title> </head> <body> <input type="button" id="randomImage" onclick="randomImage()" value="Random"> <img src="" name="canvas" /> </body> </html>
And I do not know how to set width and height so I did not write code for this yet, this code just display images random when I click button而且我不知道如何设置宽度和高度，所以我还没有为此编写代码，此代码只是在我单击按钮时随机显示图像
Your help is my pleasure你的帮助是我的荣幸
3 个解决方案
解决方案1
1 已采纳 2020-06-18 07:12:06
To identify your image by name attribute, use getElementsByName or the newer querySelector and for setting width and height you can use style attribute:要通过名称属性识别您的图像，请使用getElementsByName或更新的querySelector并设置宽度和高度，您可以使用样式属性：
document.getElementsByName("canvas")[0].src = imagesArray[num];
or或者
document.querySelector("img[name=canvas]").src = imagesArray[num];
and for width and height (you can also use querySelector here):对于宽度和高度（您也可以在此处使用 querySelector）：
document.getElementsByName("canvas")[0].style.width = "100px";
document.getElementsByName("canvas")[0].style.height= "100px";
function randomImage(){ let imagesArray = ['images/person1.jpg', 'images/person2.jpg', 'images/person3.jpg']; let num = Math.floor(Math.random() * 3); let image = document.getElementsByName("canvas")[0]; image.src = imagesArray[num]; image.style.width = "100px"; image.style.height = "100px"; }
<input type="button" id="randomImage" onclick="randomImage()" value="Random"> <img src="" name="canvas" />
if you want a random value for width and height, use it instead of the 100 in my sample如果您想要宽度和高度的随机值，请使用它而不是我示例中的 100
解决方案2
0 2020-06-18 07:11:01
You should create a class: "image"你应该创建一个 class: "image"
and in CSS you should add: .image{ width: 220px;在 CSS 中，您应该添加： .image{ width: 220px; // you put your value here height: auto; // 你把你的值放在这里 height: auto; // to considere the proportions of the image } // 考虑图像的比例 }
I am notsure if this answers your question, but you can also choose other approach you can do as following:我不确定这是否能回答您的问题，但您也可以选择其他方法，如下所示：
<div class="wrapper">
<img>
</div>
where.wrapper has overflow set to hidden and img has width of 100% and height auto, where.wrapper 的溢出设置为隐藏，img 的宽度为 100%，高度为自动，
解决方案3
0 2020-06-18 07:28:11
You could've used window.canvas here, but that's not advisable .您可以在这里使用window.canvas ，但这并不可取。 To retrieve one element, document.querySelector is your friend.要检索一个元素， document.querySelector是您的朋友。
randomImage(); document.addEventListener("click", evt => { if (evt.target.nodeName === "BUTTON") { randomImage(); } }); function randomImage() { const imagesArray = [ 'https://picsum.photos/200/300', 'https://picsum.photos/300/400', 'https://picsum.photos/100/100' ]; const randomNumber = Math.floor(Math.random() * 3); document.querySelector("img[name='canvas']").src = imagesArray[randomNumber]; }
button { float: right; position: fixed; right: 30vw; top: 1rem; }
<img name="canvas" src="" /> <br><button>Another picture</button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.