Как выровнять полосу слева от картинки?

Question

[Андрей Иванов]

Сделал что бы любого размера если картинку вставить она обрезалась но и растягивалась если надо. Но не пойму как мне выровнять полоску слева от картинки, она должна быть в высоту равной картинки и находится на одном уровне с ней
Песочница
Референс на картинке

Answer 1

[FKV]

Убери элемент отвечающий за линию.
Картинкам пропиши стиль
padding-left: 20px;
border-left: 1px solid black;

Comments

[Андрей Иванов]

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

[FKV]

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

[Андрей Иванов]

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

[FKV]

Из верстки убираем тег отвечающий за линию и пробуй то что ниже, в твоей песочнице работает
img
display: block
max-width: 100%

.container
display: grid
grid-template-rows: 1fr
grid-template-columns: 1fr 1fr
margin: 10px 60px

.slider-leaf
display: flex
flex-direction: column
height: 500px
padding-right: 20px

.wrapper-img
position: relative
overflow: hidden
height: 100%
border-left: 1px solid black
padding-left: 20px

.img
position: absolute
top: 50%
transform: translate(0, -50%)

.line
display: block
position: absolute
left: -30px
top: 0
height: 100%
width: 2px
background-color: #000

[Андрей Иванов]

FKV,
у меня так, у тебя нет?

[FKV]

Андрей Иванов, ах да, забыл что у враппера height 100%
тогда у враппера убери
border-left: 1px solid black
padding-left: 20px
и пропиши это img

Answer 2

[profesor08]

Оберни картинку блоком. Задай ему отступ и бордер.

Comments

[Андрей Иванов]

Не получится, высота будет нулевая

[FKV]

С чего это вдруг у блока в котором картинка высота нулевая??

[profesor08]

Андрей Иванов, что значит не получится? Пример в студию, где ничего не получается и высота ноль. Там картинка растянет свой контейнер на свою высоту.

[Андрей Иванов]

FKV, ну я ж приложил песочницу

[Андрей Иванов]

profesor08, ну я ж приложил песочницу

[profesor08]

Андрей Иванов, у тебя там изначальный вариант, где пример того, что у тебя не получается то, что я написал? Или ты даже не пробовал? Вот я попробовал, и все получается, ничего не схлопывается.

[Андрей Иванов]

profesor08, Я пробовал много чего и твой совет я разумеется тоже применял, видно не так как надо, щас ещё раз попробую,наверно я криво написал

[profesor08]

Андрей Иванов, border-left: 2px solid red не смог?

[Андрей Иванов]

profesor08, у меня и так картинка была обёрнута в блок, ещё раз оборачивать ?

[profesor08]

Андрей Иванов, раз обернута, то не надо