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

Question

[Fresko1991]

Уже несколько часов пытаюсь это сделать и не получается.
размеры из макета
width: 1539px;
height: 550px;

У меня вот так

<section class ="section-hero">
            <div class="container2">
                <h1 class ="section-hero-heading">This is simply a smarter way 
                    to make your legal online.</h1>
                <p class ="section-hero-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium vero tempore tenetur, omnis dolore deserunt consequatur. Corrupti, cupiditate assumenda nobis consequuntur adipisci libero commodi ad unde similique, est esse.</p>
                <a href="" class="btn">
                    FREE 30 DAYS TRIAL
                </a>
                <div class ="section-hero-btn-description">
                    <span class ="section-hero-ssl-icon"></span>
                    SSL SECURED CONNECTED
                </div>
            </div>
        </section>

.section-hero {
    background-image: url(/src/img/img.png) ;
    background-repeat: no-repeat;
    background-size: 1539px 550px;
}
.container2 {

    margin: 0 auto;
}
.section-hero-heading {
    padding-top: 125px;
}

Картинка

Comments

[Ankhena]

Как думаете, фон может отображаться за пределами элемента?
Если всё равно не понятно, то обведите ваше секцию рамочкой.

[aleks767]

еще вот что: по мере наполнения контентом высота картинки будет увеличиваться. стилизуйте свой контент.

Answer 1

[aleks767]

попробуй использовать jpg, убрать background-size, и задать макс высоту и макс ширину для section-hero. и там же просто ширину и высоту по 100%.
и container2 задать макс ширину в px, а также ширину 100% и margin: 0 auto, тогда он должен стать по центру.

Comments

[Fresko1991]

Получилось, только без

задать макс высоту и макс ширину для section-hero. и там же просто ширину и высоту по 100%.

Ибо с ними картинка вытягивалась в длинную полоску.
Поставил фикс ширину и высоту

Но теперь слева какая-то полоска на картинке. Видимо исходник такой.
Спасибо, хоть так)

[Иван Гордиенко]

Fresko1991, полоса на картинке, скорее всего, на ней самой и никак с вёрсткой не связана. Если требуется конкретное соответствие, то можно использовать хитрушку с абсолютным позиционированием, а сам элемент img будет со свойством object-fit: contain.