html – CSS Grid – The image is not diminishing.

I have the following configuration:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css" />
</head>
<body>
    <div class="container">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc massa, accumsan nec finibus cursus, finibus et lectus. Maecenas a ultrices ex, in cursus erat. Integer sed fringilla lorem. Etiam aliquet risus pretium sapien hendrerit, sit amet pretium odio condimentum. Duis a mauris congue, convallis nisi in, scelerisque urna. Nulla et felis rutrum, convallis enim fermentum, ullamcorper sapien. Donec vestibulum mi eget tortor sagittis, sit amet finibus metus consequat. Cras ac lectus consectetur, malesuada arcu et, dictum justo. Aliquam accumsan, neque id porta ultrices, ante augue consequat risus, finibus tincidunt purus velit nec mauris. Phasellus elementum, nibh vitae dapibus bibendum, urna sapien aliquet odio, vitae aliquet urna nisl a ligula. Suspendisse eleifend sem velit, id tristique metus pulvinar non. Nam id tincidunt lorem, in hendrerit nunc. Morbi vel fermentum enim. Donec non est ut nisi mollis placerat.

            Aliquam erat volutpat. Donec enim tortor, malesuada a tellus sit amet, dapibus auctor justo. Nam dui urna, facilisis non lorem vitae, molestie venenatis nulla. Ut volutpat vehicula sollicitudin. Aliquam tincidunt eleifend aliquet. Etiam at felis et nisl ultrices dictum. Nunc efficitur finibus purus sed egestas. In posuere libero et ipsum maximus porta.
            
            Donec et nibh tempus, tincidunt ex ut, accumsan dui. Integer pharetra faucibus augue volutpat condimentum. Donec dapibus luctus eleifend. Cras vitae tempor mi, iaculis tincidunt dui. Vestibulum commodo eget dolor ac ornare. Quisque tincidunt ex a mi imperdiet faucibus. Nam varius, neque eu tempor consectetur, sapien orci placerat sapien, ut tempor lorem magna ac nunc. Phasellus quis quam eu odio pellentesque commodo a non elit. Praesent ultricies lobortis elit, id tempus justo pellentesque in.
            
            Sed mattis odio quis ipsum tempus vehicula. Curabitur in rhoncus ligula. Donec justo elit, iaculis sed turpis ac, hendrerit lobortis nisi. Vestibulum id lorem at nibh pharetra fermentum. Maecenas cursus aliquam lacus, eu condimentum quam fermentum vitae. Praesent sit amet tincidunt justo. Praesent condimentum mauris elit, vel faucibus massa ullamcorper consectetur. Integer gravida velit eros, vitae convallis dolor commodo ac. Cras hendrerit eu tortor ac vulputate. Nunc rhoncus at nunc nec sagittis.            
        </div>
        <div class="image-section">
            <img class="image" src="https://picsum.photos/id/237/400/600"/>
        </div>
    </div>
</body>
</html>
.container {
    width: 1200px;
    display: grid;
    grid-template-columns: 1fr auto;
}

It seems:
Enter image description here.

I want the image to be scaled down to the height of the relevant text. Can I get it from CSS Grid? I thought I could use it. auto I grid-template-columns But it is not working.

Write a Comment