Queen2
@Queen2

Список из картинок уезжает за пределы страницы при уменьшении разрешении экрана. Как исправить?

Что нужно сделать что бы картинка уменьшалась?
6153451db0c42858136667.png6153452169118802626020.png
<!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="./css/main.css">
    <title>Lesson 21</title>
</head>

<body>
    <section class="latest block">
        <h2 class="latest__title">Lates Works</h2>
        <ul class="list ">
            <li><a href="#"><img src="./img/f1.png" alt=""></a></li>
            <li><a href="#"><img src="./img/f2.png" alt=""></a></li>
            <li><a href="#"><img src="./img/f3.png" alt=""></a></li>
        </ul>
        <ul class="list">
            <li><a href="#"><img src="./img/h1.png" alt=""></a></li>
            <li><a href="#"><img src="./img/h2.png" alt=""></a></li>
            <li><a href="#"><img src="./img/h3.png" alt=""></a></li>
        </ul>
    </section>
</body>

</html>

@import url(./fonts.css);
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.block{
    max-width: 100%;
    padding: 0 10%;
}
.latest{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.latest__title{
    font-family: 'lato-light';
    font-size: 50px;
    color: #3695ff;
    padding: 90px 0 100px 0;
}
.list{
    display: flex;
    justify-content: center;
    list-style-type: none;
}
.list li:nth-child(2){
    margin: 0 30px;
}
.list:nth-child(3){
    padding: 50px 0 200px 0;
}
  • Вопрос задан
  • 38 просмотров
Решения вопроса 1
ikonkov
@ikonkov
.list задайте макс ширину 100%, li - склько нужно в процентах, а img внутри макс ширина 100%, высота авто
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы