
Change the aspect ratio of an image using CSS
24/09/2021In this post I'll show you how to change the aspect ratio of an image or element using CSS, and explain why this is important.
Ever had an array-like object that you want to iterate over? These annoying collections, which look like arrays, don’t have access to useful array methods like the ‘forEach‘ loop. They include objects with a length property, such as HTMLCollection, NodeList, argument list and even strings. Today I’m going to show you how to make these objects a little bit more useful, by converting them into JavaScript arrays.
Let’s start with a simple scenario where we have 5 divs. Each div has the same class and we query for a HTMLCollection using ‘getElementsByClassName‘.
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
const boxes = document.getElementsByClassName('box');
</script>
Here are 4 ways to convert the returned HTMLCollection to an array.
A spread operator will allow us to expand the values of our array-like object and push them into a new array. This works because the HTMLCollection is iterable. The code looks something like this:
const boxArray = [...document.getElementsByClassName('box')];
Array.from does what it sounds like; it converts array-like objects to actual arrays. This is my preferred method of converting to array because it is semantically very easy to read at a glance. You should note that this method isn’t actually supported by Internet Explorer, but who cares about Internet Explorer now anyway…
const boxes = Array.from(document.getElementsByClassName('box'));
More widely supported, we can use the Array.prototype.slice.call() (or [].slice.call for short) methods for converting. Basically we are using the array method ‘slice‘ (which returns a copy of an array) on an array-like object with a ‘call’ method, and then saving the copy into a new array object.
var boxes = Array.prototype.slice.call(document.getElementsByClassName('box'));
var boxes = [].slice.call(document.getElementsByClassName('box'));
Last, but not least, you could solve this problem the good old fashioned way; with a simple iterator loop. From here we could loop our array-like object ‘as-is’ or push each iteration to a new array (in this case ‘boxArray’) for a future use.
const boxes = document.getElementsByClassName('box');
const boxArray = [];
for (let i = 0; i < boxes.length; i++) {
console.log(boxes[i]);
// At this point we could also push the elements to an array
boxArray.push(boxes[i]);
}
In this post I'll show you how to change the aspect ratio of an image or element using CSS, and explain why this is important.
Here is how you can fix node incompatibility error, using "Node Sass does not yet support your current environment" as an example.
Need to make a directory in PHP? No Problem! mkdir has you covered... Need to recursively make directories in PHP? mkdir has you covered, too!
Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.
Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.
Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!
Exactly what I needed.
YES I AGREE
Ohhh thank you dude !!! I wanted to style elements by classNames but it doesn’t work with forEarch. I searched documentation everywhere about this.
Thanks ever so much – just what I needed!
I am getting [object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement] as the output to innerHTML I have set. How can I get the actual values between the DIVS.
Thank you! This article was all I needed!