How to Fill an Image Size Without Stretching in CSS ?

How to use Flex to Shrink an Image in CSS ?

Last Updated : 15 Oct, 2024

Shrinking an image in CSS means reducing its size to fit within a container. Using Flexbox, you can apply the flex-shrink property to control how much an image shrinks relative to other elements in a flex container, ensuring responsive resizing when space is limited.

Syntax

flex-wrap: wrap

Note: wrap is used to break the flex item into multiples lines. It makes flex items wrap to multiple lines according to flex item width.

Example: Here we creates a responsive image gallery using Flexbox. The .container holds three images that adapt their size based on the screen width, with padding and margins for spacing.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: -webkit-flex;
            -webkit-flex-wrap: wrap;
            display: flex;
            flex-wrap: wrap;
            background-color: grey;
        }

        img {
            width: 100%;
        }

        div {
            flex: 1;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
    </div>
</body>

</html>

Output:

flex-wrap property

How to Fill an Image Size Without Stretching in CSS ?

aksrathod07

Improve

Article Tags :

Similar Reads

How to use flex to shrink an image in CSS ?

Shrinking an image in CSS means reducing its size to fit within a container. Using Flexbox, you can apply the flex-shrink property to control how much an image shrinks relative to other elements in a flex container, ensuring responsive resizing when space is limited. Syntaxflex-wrap: wrapNote: wrap

How to Fill an Image Size Without Stretching in CSS ?

The CSS object-fit property is used to fill an image in a container without stretching preserving its aspect ratio. CSS object-fit PropertyCreate an image container and specify the width and height. Set the object-fit: cover property and overflow: hidden property to maintain the image's aspect ratio

How to Flip an Image on hover using CSS?

Flipping an image with a mirror effect on hover using CSS enhances visual interaction by applying transformations along the X or Y axis. This dynamic hover animation creates an engaging experience by flipping the image horizontally or vertically, resulting in an eye-catching, interactive effect. App

How to create and use CSS Image Sprites ?

In this article, we are going to learn how we can how to create and use CSS Image Sprites. CSS Image Sprites are nothing but a way to reduce the HTTP requests from the image resources. A CSS Image Sprite is a single image file containing all images on a document page. Image sprites are advantageous

How to Adjust Image Size in CSS?

Adjusting the image size using CSS is a common task for web developers when designing responsive and visually appealing web pages. CSS can provide several ways to manipulate the dimensions of the image, including setting fixed sizes, scaling, or making them responsive to the container they are in. W

How To Add Blur Effects to Images in CSS ?

Adding blur effects to the images in web applications enhances the visual appearance of the content. We can add blur effects using various CSS properties. Below are the approaches to add blur effects to images in CSS: Table of Content Using CSS filter propertyUsing backdrop-filter PropertyUsing CSS

How to zoom in an image using scale3d() function in CSS ?

In this article, we will learn how to zoom in on an image using the scale3d() function which is an inbuilt function in the transform property that has its aspects to resize the element in 3D space. It scales the element in the x, y, and z planes. Syntax: scale3d( x, y, z ) Parameters: Above function

How to Add Image in CSS?

Images are an essential part of web design, bringing the visual appeal and providing the context to content. In web development, images can be added to the websites using HTML and styled or manipulated using CSS. CSS can offer various ways to incorporate images into web pages, allowing the developer

How to Prevent Flexbox Shrinking in CSS?

The Flexbox is a powerful layout module in CSS that makes it easy to design flexible and responsive layouts. However, one common issue that developers face is preventing the flex items from shrinking. The Flexbox or the Flexible Box Layout is a layout model that allows elements within the container

How to Zoom an Image on Mouse Hover using CSS ?

Here are three different ways to zoom an image on mouse hover in CSS. 1. Using CSS transform and scale PropertyThe most common way to implement image zoom on hover is by using the CSS transform property along with the scale property. This method allows you to enlarge the image when the mouse hovers