How do I use the "Fill" - "Cover" option in Webflow to fit an image within a div block without resorting to a background image?

To fit an image within a div block without resorting to a background image, you can utilize the "Fill" - "Cover" option in Webflow. This option allows you to control how the image is displayed while maintaining its aspect ratio.

Here's how you can use the "Fill" - "Cover" option in Webflow:

1. Add an Image element to your div block: Start by adding an Image element to your div block. You can do this by dragging and dropping the Image element from the Elements panel onto your div block.

2. Upload or select an image: Once you've added the Image element, you can either upload a new image or select an existing one from your media library. To upload a new image, click on the "Upload" button and select the image file from your computer. To select an existing image, click on the "Choose from library" button and select the desired image.

3. Set the image to fill the div block: With the Image element selected, go to the right-side panel and click on the "Style" tab. Under the "Width" and "Height" section, select the "Fill" option for both dimensions.

4. Choose the "Cover" option for image scaling: Still in the "Style" tab, scroll down to the "Background" section. You'll find an option called "Scale" with a drop-down menu. Select the "Cover" option from the menu. This will ensure that the image scales proportionally to fill the available space in the div block while maintaining its aspect ratio.

5. Adjust the positioning if needed: If you want to adjust the position of the image within the div block, you can do so by modifying the "Position" properties under the "Background" section. For example, you can center the image vertically and horizontally by setting the "Position" to "Center Center."

That's it! By following these steps, you can use the "Fill" - "Cover" option in Webflow to fit an image within a div block without resorting to a background image. This approach allows for more flexibility and control over how the image is displayed within the div block.