3

если подключаю url в css напрямую, то картинка ведёт себя, как нужно. Если создать тег img и там написать url и потом прописать свойства через bg_fon img, то картинка ведёт себя странно, не растягивается на весь экран и сжимается странно. В первом примере работает странно, во втором примере работает, как нужно. Не понимаю, как можно сделать чтобы в первом примере работала также, как и во втором.

.bg_fon{
    position: absolute;
    top:0px;
    width: 100%;
    height: 793px;
          
    background-size: cover;
    background-position: right;   
  [![введите сюда описание изображения][1]][1]
}

@media (max-width:500px) {
    .bg_fon {
        background-position: left;    
    /* opacity: 0.5; */
        
    }
<div class="bg_fon"><img src="https://sun9-88.userapi.com/impf/XDJxO5SXF6b8TbJf4_HKsjYK44cuA-6Z34l9Jg/2_imjOMQd9I.jpg?size=1440x793&quality=95&sign=11d5d1b733a9253908721965b71573d4&type=album"></div>

.bg_fon{
    position: absolute;
    top:0px;
    width: 100%;
    height: 793px;
          background: url("https://sun9-88.userapi.com/impf/XDJxO5SXF6b8TbJf4_HKsjYK44cuA-6Z34l9Jg/2_imjOMQd9I.jpg?size=1440x793&quality=95&sign=11d5d1b733a9253908721965b71573d4&type=album")  no-repeat;
    background-size: cover;
    background-position: right;   
  
}

@media (max-width:500px) {
    .bg_fon {
        background-position: left;    
    /* opacity: 0.5; */
        
    }
    
}
    <div class="bg_fon"></div>

1 ответ 1

2

Можно применить object-fit: cover.

 .bg_fon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }  

.bg_fon{
    position: absolute;
    top:0px;
    width: 100%;
    height: 793px;          
 
}

.bg_fon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="bg_fon"><img src="https://sun9-88.userapi.com/impf/XDJxO5SXF6b8TbJf4_HKsjYK44cuA-6Z34l9Jg/2_imjOMQd9I.jpg?size=1440x793&quality=95&sign=11d5d1b733a9253908721965b71573d4&type=album"></div>

1
  • Большое спасибо, разобралась :)
    – Vivian
    23 апр 2022 в 14:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.