Create a responsive cropped 'view' of an image with CSS

Bidding requirements: * No automated bids; they will be reported as abuse. * In the bid show that you have read the description and understand the problem. * Do not provide a list of your projects and skills; all I care about is what you say in the bid relevant to the project. * Do not use a template response. * Do not mention Wordpress. * Security question: What is the complementary color of yellow? * Security question: How much is 7*6 + 24? Project details: I create a lot of galleries. In the past I have used ImageMagick to crop the images to specific dimensions such as 1280x1280px or 1280x960px, square and 4:3 aspect ratio. In the frontend I use bootstrap grid/cells to display the images commonly with 3 or 4 columns. By pre-cropping the images they display perfectly uniformly on the frontend. I saw some articles that discuss being able to use CSS (and object-fit) to be able to create a view of an image. You can feed in a wide/landscape image and end up with a square view (from center) of the image. The posts explained this with a fixed dimension image like 400x400. That doesn't work as the images need to be responsive. The requirement is to provide the CSS code for a specified aspect ratio (1:1 or 4:3, etc) view with responsive images.