CODEWITHSUNDEEP
htmlcssimagesass
TangoMan
TangoMan

Reputation: 27

How do I make images shrink when the screen is reduced?

I use flex boxes

html

<div class="sorts__descr">
    <p>bla bla</p>
    <div class="coffee">
       <img src="./img/sorts/rob.png" alt="coffee">
    </div>
</div>

sass

&__descr
        display: flex
        justify-content: space-between
        align-items: start
        img
            position: relative
            margin: 0 40px
            max-width: 530px
            border-radius: 20px
        p
            font-size: 18px
            line-height: 135%

The output is: enter image description here

I tried using different methods such as:

    width: 100%;
    height: auto;

or

    max-width: 100%;
    height: auto;

or

    width: 100%;
    max-width: 400px;
    height: auto;

When I specify max-width: 100% for an image, the result is: enter image description here

I want it to be like this when the screen is zoomed out: enter image description here

Upvotes: 2

Views: 1030

Answers (1)

VeryBadCoder
VeryBadCoder

Reputation: 66

Have you tried to make the website responsive?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p>

<img src="img_girl.jpg" style="width:100%;">

</body>
</html>

Upvotes: 2

Related Questions