Aspect Ratio Property

Would it be too demanding to ask for aspect-ratio to be added to the available CSS properties in the block inspector?

May just be a “me” thing, but I use it all the time. I love that we have object-fit, but would love to have access to aspect-ratio to round this out.

For the record, I use it on images as well as divs containing images if I need an image to maintain a certain look regardless of screen size.

5 Likes

I like this suggestion, so +1 from me.
Will save a couple of steps compared to the old school method.

1 Like

I have stopped generating multiple image sizes since the aspect ratio property in css picked up browser support. It’s very good way to get the desired aspect ratio without filling up the server storage.

I use the following images sizes generally while removing the default wp sizes. Aspect ratio property with object fit takes care of the rest. Previously I used to generate image sizes for different aspect ratio

// Custom image sizes
add_theme_support( 'post-thumbnails' );

// Original Soft Crop
add_image_size( 'original-1920px', 1920, 1920 );
add_image_size( 'original-1440px', 1440, 1440 );
add_image_size( 'original-960px', 960, 960 );
add_image_size( 'original-480px', 480, 480 );
add_image_size( 'original-240px', 240, 240 );

// Make sizes available in the theme
function my_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'original-1920px' => 'Original 1920px', 
        'original-1440px' => 'Original 1440px', 
        'original-960px' => 'Original 960px', 
        'original-480px' => 'Original 480px', 
        'original-240px' => 'Original 240px',
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'my_custom_image_sizes' );

// Remove default image sizes 
add_filter( 'intermediate_image_sizes', 'my_remove_default_img_sizes', 10, 1);

function my_remove_default_img_sizes( $sizes ) {
  $targets = ['thumbnail', 'medium', 'medium_large', 'large', '1536x1536', '2048x2048', 'woocommerce_thumbnail', 'woocommerce_single', 'woocommerce_gallery_thumbnail'];

  foreach($sizes as $size_index=>$size) {
    if(in_array($size, $targets)) {
      unset($sizes[$size_index]);
    }
  }

  return $sizes;
}
4 Likes

Thanks for hinting @dranzer.
Bookmarked for further research :sunglasses:

@Marius You might also be interested in the below code. I use it to generate webp images for image sizes and it keeps the original (full size) image as jpg/png for backward compatibility with older browsers. Also saves some space on the server and I don’t use any image optimization plugins.

// Retain full size image in original format and make other sizes in webp
function my_wp_image_editor_output_format( $formats ) {
    $formats['image/jpeg'] = 'image/webp';
	$formats['image/png'] = 'image/webp';
 
    return $formats;
}
add_filter( 'image_editor_output_format', 'my_wp_image_editor_output_format' );
5 Likes

Did we get this, then it was removed? I could have sworn I saw aspect ratio a few days ago.

I might just be going crazy, though.

Not that I’m aware of, but can’t confirm, unfortunately.

Crazy it is, then, I guess.