
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.
Programming blind would be a dark and lonely place for any modern developer. Fortunately, Sass has debugging features to make problems easier to work with. With @debug, @warn and @error we can debug useful information straight to our consoles.
It is worth noting that I use node-sass in my examples, so your mileage may vary.
Ever wondered how to dump a variable in Sass? @debug has you covered. This handy rule allows you to output variables and expressions directly to your console. It even adds the file and line-number for your convenience.
$colour: #fff;
div {
background: $colour;
@debug "The colour is: #{$colour}";
}
In this example we are simply dumping the current value of $colour to the console.
/* Console Output */
path/to/style.scss:6 DEBUG: The colour is: #fff
@warn allows you a form of validation. It doesn’t stop Sass from running but will throw a warning if the code is run. This is a neat way to remind yourself, or your users, of certain stylistic typos or problems.
$background: #fff;
$colour: #fff;
div {
background: $background;
color: $colour;
@if $background == $colour {
@warn "Background and text are both #{$colour}!";
}
}
In this example the background colour and text colour are the same, therefore a warning is shown in the console.
/* Console Output */
WARNING: Background and text are both #fff!
on line 9 of style.scss
Finally we have the meaty ‘hey, stop everything… you’ve F***ed up!’ rule. If run, @error will print an error message and then stop the compiler dead.
$background: #fff;
$colour: #fff;
div {
@if $background == $colour {
@error "Background and text are both #{$colour}!";
}
background: $background;
color: $colour;
}
The example stops the style sheet from being written and throws an error and stack trace which looks something like this:
/* Console Output */
{
"status": 1,
"file": "path/to/file",
"line": 10,
"column": 10,
"message": "Background and text are both #fff",
"formatted": "Error: Background and text are both #fff\n on line 6 of path/to/file... etc"
}
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!