Задать вопрос
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
верстка

Как сделать, чтобы затемнение не вылазило за картинку, а сама картинка растягивалась по размеру блока?

При адаптиве затемнение вылазит за картинку. Нужно, чтобы картинка обрезалась(с bg-size:cover обрезает только с правой стороны, встречный вопрос, как тогда сделать, чтобы обрезалась с двух сторон равномерно?) или зумилась по размеру блока, как решить проблему?
<!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>
</head>
<body>
    <div class="page">
    <div class="content-container">
<div class="header"><div class="head-pos"><h2 style="text-align: center;">Заголовок<p style="font-size: 12px">Текст</p></h2></div></div>
    </div>
</div>
</body>
<style>
    @import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
    *{
        margin:0;
        padding:0;
    }
    html{
        font-family: 'Montserrat';
    }
    .head-pos{
        width: 100%;
       
        height: 100%;
        backdrop-filter: brightness(40%);
    }
    .header{
       color:white;
        width: 100%;
        height: 450px;
        background-size: 100%;
        background-repeat: no-repeat;
        background-image: url(photo.jpg);
        
    }
    .page{
        width: 100%;
        display: flex;
        justify-content: center;
        background-color: rgb(250, 250, 250);
    }
    .content-container{
        width: 800px;
       
        height: auto;
        margin: 0px 10px 0px 10px;
        background-color: white;
    }
</style>
</html>

Вот так в адаптиве:
639a17b712f3e507228856.png
Вот так сначала:
639a17c8248bf857108975.png
  • Вопрос задан
  • 53 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@DmiDrok 
<!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>
</head>
<body>
  <div class="page">
    <div class="content-container">
      <div class="header">
        <img src="https://uprostim.com/wp-content/uploads/2021/05/image001-7.jpg" alt="">
        <div class="head-pos">
          <h2 style="text-align: center;">Заголовок<p style="font-size: 12px">Текст</p></h2>
        </div>
      </div>
    </div>
  </div>
</body>
<style>
    @import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
    *{
        margin:0;
        padding:0;
    }
    html{
        font-family: 'Montserrat';
    }
    .head-pos{
        width: 100%;
        height: 100%;
        backdrop-filter: brightness(40%);
    }
    .header{
       color:white;
        width: 100%;
        /* 
        height: 450px;
        background-size: 100%;
        background-repeat: no-repeat;
        background-image: url(photo.jpg); 
        */
    }
    .page{
        width: 100%;
        display: flex;
        justify-content: center;
        background-color: rgb(250, 250, 250);
    }
    .content-container{
        width: 800px;
        height: auto;
        margin: 0px 10px 0px 10px;
        background-color: white;
    }

    /***********/

    img {
      max-width: 100%;
      display: block;
    }
    
    .header {
      position: relative;
    }

    .head-pos {
      position: absolute;
      left: 0;
      top: 0;
    }
</style>
</html>
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Fullstack разработчик
indiweb • Санкт-Петербург
от 25 000 до 45 000 ₽
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработка телеграм-бота с нейросетью по ТЗ
08 мая 2024, в 01:03
15000 руб./за проект
Помочь настроить captive portal
07 мая 2024, в 23:46
3000 руб./за проект
Программирование дронов ROS, Python
07 мая 2024, в 23:32
1200 руб./в час
Ещё заказы