0

.logo-holder {
    max-width: 22.5rem;
    width: 100%;
    padding: 0 .9375rem;
    margin: 0 auto 1.25rem;
    position: relative;
}

.logo-holder .logo {
    width: 3.75rem;
    margin: 0 0 1.5rem;
    text-align: center;
    position: static;
}

.logo-holder .img-block:first-child {
    margin: 0 -.625rem 0 0;
}

.logo-holder .img-block:last-child {
    margin: 0 0 -.155rem -.612rem;
}
.logo-holder:after,
.logo-holder:before {
    content: "";
    position: absolute;
    bottom: 3px;
    height: 2px;
    background: #343536;
    width: 100%;
        margin: 0.37rem;
    }

.logo-holder:before {
    left: 100%;
}

.logo-holder:after {
    right: 100%;
}
<div class="logo-holder d-flex align-items-end justify-content-center">

                <div class="logo">
                    <a href="#">
                        <img -label="Logo" gv-img="img" src="" width="50" alt="">
                    </a>
                </div>
                <div class="img-block">
                    <img src="" width="200" alt="image description">
                </div>
            </div>

При Responsive появляется горизонтальный скролл. Как получить прилипание линий по краям СТРАНИЦЫ и интерактивную адаптацию?

1 ответ 1

0

Например такой вариант:

body {
  margin: 0;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50vh;
}

.image::before,
.image::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: black;
}

.image img {
  display: flex;
  flex: 1 0 auto;
  max-width: 100%;
  max-height: 100%;
  border: 2px solid black;
  box-sizing: border-box;
}
<div class="image">
  <img src="https://i.imgur.com/cJQUF5s.png">
</div>
<div class="image">
  <img src="https://i.imgur.com/DnADg8m.png">
</div>


Костыльный способ

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  overflow: hidden auto; /* Запрещаем горизонтальный скролл */
}

.image {
  display: inline-flex
  max-width: 200px;
  height: 50vh;
  margin: 0 auto;
  position: relative;
}

.image::before,
.image::after {
  content: '';
  display: block;
  width: 50vw;
  height: 2px;
  background: black;
  position: absolute;
  top: calc(50% - 1px);
}

.image::before {
  left: 100%;
}

.image::after {
  right: 100%;
}

.image img {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  border: 2px solid black;
  box-sizing: border-box;
}
<div class="image">
  <img src="https://i.imgur.com/cJQUF5s.png">
</div>
<div class="image">
  <img src="https://i.imgur.com/DnADg8m.png">
</div>

3
  • Соррян, имелось ввиду, прилипание по краям страницы.
    – Aleksus
    Commented 5 авг. 2020 в 12:11
  • Это футер и достаточно было добавить overflow:hidden в тело футера и всё. Не знаю, насколько способ "костыльный", но кода минимум и всё работает.
    – Aleksus
    Commented 5 авг. 2020 в 12:43
  • Если помог "костыльный", то это хорошо. Но лучше заранее продумывать и использовать "нормальный" вариант)
    – De.Minov
    Commented 5 авг. 2020 в 12:45

Ваш ответ

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

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