Что нужно добавить в css чтобы изображения стали адаптивными?

Question

Подскажите пожалуйста, что мне нужно сделать в css, чтобы изображения меняли размеры вместе с увеличением/уменьшением экрана? С текстом получилось, а с картинками нет. Заранее спасибо.

body {
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
}

header {
    display: flex;
    flex-direction: row;
    border-bottom: 0.2vh solid;
    margin: 0;
}

footer {
    margin-top: auto;
    height: 10vh;
    border-top: 0.2vh solid;
}

.dnk_logo {
    width: 20vh;
    height: auto;
    margin-left: 10vh;
}


.shopping_cart {
    width: 4vh;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: 1.5vh;
}
.shopping_cart:hover {
    background: rgb(60, 188, 215);
}

.log_in {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 300;
    font-size: 3vh;
    margin-top: auto;
    margin-bottom: auto ;
    margin-left: 1.5vh;
    margin-right: 1.5vh;
}
.log_in:hover {
    color: rgb(60, 188, 215);
}

.log_in_img {
    width: 3.5vh;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 1.5vh;
    margin-right: 10vh;
}

.nav_courses {
    display: flex;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin-top: 5vh;
}

.item {
    margin: 2vh;
}

.content {
    display: flex;
    flex-direction: row;
    justify-content: center;   
}

.concrete_content {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 30vh;
    margin: 4vh;
    align-items: center;
    text-align: center;
    padding-bottom: 0%;
}

.content_image {
    height: 16vh;
    width: 30vh;
}

.content_h2 {
    font-family: 'JetBrains Mono', monospace;
    align-items: center;
    justify-content: center;
    font-size: medium;
}

<!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">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&family=Roboto:wght@300&display=swap" rel="stylesheet">
    <title>Днк</title>
</head>
<body>

<div class="wrapper">
    
<header>
    <img src="else/dnk_logo.svg" alt="dnk_logo" class="dnk_logo">

    
    <img src="else/shopping_cart_logo.svg " alt="shopping_cart" class="shopping_cart">
    <h1 class="log_in">Log in</h1>
    <img src="else/log_in.svg" alt="log_in" class="log_in_img">
    
</header>

<main>
    <nav class="nav_courses">
    <h1 class="item">Все</h1>
    <h1 class="item">Физика</h1>
    <h1 class="item">Математика</h1>
    <h1 class="item">ТРИЗ</h1>
    <h1 class="item">Личностный рост</h1>
    </nav>

    <div class="content">
        <div class="concrete_content">
            <img src="else/image2vector (1).svg" alt="atomic_physics" class="content_image">
            <h2 class="content_h2">Атомная физика</h2>
        </div>
        <div class="concrete_content">
            <img src="else/image2vector (2).svg" alt="molecular_physics" class="content_image">
            <h2 class="content_h2">Молекулярная физика</h2>
        </div>
    </div>
    <div class="content">
        <div class="concrete_content">
            <img src="else/image2vector (1).svg" alt="atomic_physics" class="content_image">
            <h2 class="content_h2">Атомная физика</h2>
        </div>
        <div class="concrete_content">
            <img src="else/image2vector (2).svg" alt="molecular_physics" class="content_image">
            <h2 class="content_h2">Молекулярная физика</h2>
        </div>
    </div>
    
</main>

<footer></footer>

</div>

<script src="scripts/main.js"></script>    
</body>
</html>

Answer 1

vw – 1% ширины окна vh – 1% высоты окна А у Вас для width указано vh

БЛОГ НА HUSL

Что нужно добавить в css чтобы изображения стали адаптивными?

Ответы (1 шт):