Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Working with Images in CSS | Adding Decorative Effects with CSS
CSS Fundamentals
course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS
What is CSS and Why is it Important?Linking CSS to an HTML DocumentMastering CSS Selectors for Styling HTML ElementsChallenge: Apply Your First CSS StylesChallenge: Style with Class SelectorsEnhancing Styles with User Action Pseudo-ClassesChallenge: Apply User Action Pseudo-ClassesChanging Text Colors in CSSOptimizing Workflow for Efficient CSS CodingChallenge: Use Variables for Better CSS Management
2. Styling Text in CSS
Mastering Text Styling in CSSText Formatting Techniques for ReadabilityChallenge: Format Text with CSSAdding Custom Fonts to a Web PageUnderstanding and Using Font PropertiesChallenge: Explore Font Properties
3. The CSS Box Model & Spacing Elements
What is the CSS Box Model?Understanding Box Sizing in CSSAdding Space with Margins and PaddingChallenge: Apply Box Sizing to ElementsUsing Structural and Functional Pseudo-ClassesChallenge: Practice Structural Pseudo-ClassesUnderstanding Block, Inline, and Inline-Block ElementsWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict Page Layout with Different Element Types
4. Mastering Flexbox for Layouts
What is Flexbox and Why Use It?Setting the Flex Direction for LayoutsJustifying Content Horizontally in FlexboxAligning Items Vertically in FlexboxUnderstanding Flex Item PropertiesChallenge: Apply Flexbox ConceptsChallenge: Build a Layout with Flexbox
5. Adding Decorative Effects with CSS
Using Background Colors for DesignApplying Background Images to ElementsWorking with Images in CSSCreating Effects with Decorative Pseudo-ElementsAdding Shadows for Depth and StyleChallenge: Implement Decorative Effects in CSSFurther Steps

book
Working with Images in CSS

We know that images play a crucial role on a web page. It helps to show the content effectively and clearly. Sometimes, the content image may have a size that is either bigger or smaller than the container it is intended to be displayed in, or its aspect ratio may be different from that of the container. We will consider how to show an image in the best manner.

object-fit

object-fit specifies how an image should be resized to fit its container.

css
  • fill stretches the image to fill the container, regardless of its aspect ratio. This may cause the image to be cropped or distorted;
  • contain scales the image to fit the container while preserving its aspect ratio. This may result in empty space around the image if the container and the image have different aspect ratios;
  • cover scales the image to completely cover the container while preserving its aspect ratio;
  • none displays the image at its original size, regardless of the size of the container. This may cause the image to overflow the container;
  • scale-down scales the image down to fit the container if it is larger than the image's natural size, or displays the image at its natural size if it fits within the container.
html

index.html

css

index.css

copy

object-position

object-position specifies the position of the image inside its container. It accepts two values: a horizontal value and a vertical value or we can use reserved words.

css
html

index.html

css

index.css

copy
question mark

What does the object-fit property do?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 5. Chapter 3
We're sorry to hear that something went wrong. What happened?
some-alt