
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.
String interpolation is fancy ‘programmer’ talk for injecting variables into strings. Most programming languages have a way of doing this and we are going to have a look at JavaScript and Sass/scss in this post.
In JavaScript you are probably used to seeing strings handled like:
const variable1 = 'hello';
const variable2 = 'world';
console.log(variable1 + " " + variable2); // Output: 'hello world'
In ES6 we can use interpolation to make the code more human readable. The above example becomes something like this:
console.log(`${variable1} ${variable2}`); // Output: 'hello world'
Sass is no different to this and it actually becomes fundamental to use interpolation if we want to work with CSS variables.
body {
background-color: var(--some-css-variable, blue);
}
$colour: #fff;
body {
--some-css-variable: #{$colour};
}
This works in the same way if we want to use Sass variables inside of strings:
$themeColour: "red";
body {
background-color: blue;
&[theme="#{$themeColour}"] {
background-color: red;
}
}
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!