Как уменьшить и отцентрировать картинку при адаптиве?

Question

Первым делом, мне надо уменьшить картинку, чтобы она не сильно потеряла в качестве. Далее, мне надо её отцентрировать. Если вы посмотрите на скрин, то увидите, как границы картинки в макете выходит за сам макет. Можно ли сделать примерно такое же в css/scss? Даже нет понятия, как это сделать. Ширина блока 340. На следующем скрине можете увидеть, как у меня пока что получается. Не обращайте внимание на текст выше

Answer 1

 <div class="header">
        <img src="https://img-fotki.yandex.ru/get/5631/66124276.12a/0_8e9ce_68f4d186_orig" alt="" class="dogs">
 </div>



    
.header {
    width: 100%;
    height: 100vh;
    background-color: burlywood;
}

.dogs {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

@media (max-width: 515px) {
    .dogs {
        width: 100%;
    }
}

БЛОГ НА HUSL

Как уменьшить и отцентрировать картинку при адаптиве?

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