Как сверстать такое?

Question

[wakenbyWork]

Есть такая секция:

Фотография

Все фотографии расположены абсолютно, и ширина задана в процентах, и при уменьшении окна браузера, фотографии уменьшаются по высоте и по ширине.

P.S: Вопрос в том, как сделать высоту контейнера по содержимому которое спозиционированно через absolute?

Comments

[Ankhena]

Сначала задаете высоту блоку (или скорее пропорции хаком с паддингам), потом в нем расставляете абсолюты.

[wakenbyWork]

Ankhena, Я вот думаю как-то хаком сделать padiing-bottom чтобы он тоже при изменении ширины менял значение как и высота картинок внутри. Не подскажите как можно такое провернуть с padding?

[Ankhena]

wakenbyWork, например, так https://jsfiddle.net/Ankhena/cLhxv7eq/

[wakenbyWork]

Ankhena, Спасибо за совет, у меня фотографии в ширину выставлены через vw, и позиция через vw, и я поставил padding-bottom через vw, и все работает шикарно!)

[Ankhena]

wakenbyWork, эммм.... ну вы накрутили
Зачем заморочки с паддингом, если вы считаете в vw?
Просто высоту задайте.

[wakenbyWork]

Ankhena, А тут при адаптиве тогда высота будет фиксирована, и фотографии будут уменьшаться по высоте, а высота родителя нет, и отступ от секции к более нижней секции будет расти((

Или вы имеете ввиду задавать высоту через vw?

[Ankhena]

wakenbyWork,

Или вы имеете ввиду задавать высоту через vw?

естественно, раз вы её уже вычислили в vw

[Ankhena]

wakenbyWork,

отступ от секции к более нижней секции будет расти

И не понятно почему будет расти отступ, если у вас там есть картинки, у которых позиционирование от bottom ;)

Для размеров в vw это уже не актуально, но просто повод задуматься.

[wakenbyWork]

Ankhena, Спасибо, задал через vw высоту родителя! Все работает отлично! Я просто не сталкивался с vw и пока туплю в таком моменте

[wakenbyWork]

Ankhena,

И не понятно почему будет расти отступ, если у вас там есть картинки, у которых позиционирование от bottom ;)

- не, я позиционирую через left, top

[Ankhena]

wakenbyWork,

- не, я позиционирую через left, top

Откройте для себя новый мир с right и bottom ;) ;)

[wakenbyWork]

Ankhena, Блин работает и с right, bottom если задавать все через vw, думал что не сработает! Спасибо еще раз, учту на будущее!)))

[wakenbyWork]

Ankhena, А не подскажите лучше с % работать или с vw? Просто я и на процентах точно так-же могу выставить картинки в контейнере, не вижу разницы пока что((

[Ankhena]

wakenbyWork,

А не подскажите лучше с % работать или с vw?

% в разных случаях считаются от разных величин
В каких-то случаях это совпадет с vw, где-то совсем нет.

Например, блок с фикс размером шрифта 100px
В нем заголовок с размером шрифта 110%
vw тут как-то совсем не при делах.

[wakenbyWork]

Ankhena, Понятненько! Спасибо еще раз!

Answer 1

[Алексей Дубровин]

Понял что проблема в резиновой картинке. Больше вообще ничего не понял

Comments

[wakenbyWork]

Вопрос в том, как сделать высоту контейнера по содержимому которое спозиционированно через absolute?

[Алексей Дубровин]

wakenbyWork, Никак, абсолютные элементы идут вне потока основного документа.

[wakenbyWork]

Алексей Дубровин, Я в курсе, если не можете дать вариант как схитрить то не нужно вообще отвечать

[lUser L]

wakenbyWork, сделать обертку для элемента с absolute и ему задать фиксированную высоту, ширину и position: relative

[wakenbyWork]

Эмиль 🔥, Фиксированная высота не может, картинки будут по высоте уменьшаться, и отступ с низу будет больше и больше при уменьшении экрана((

[v3shin]

Используйте vw для высоты контейнера.

[Алексей Дубровин]

wakenbyWork, Вам хак был скинут в ответе выделен синим цветом. Кроссбраузерное решения для плавного изменения размеров картинки от ширины объекта. На этой же странице есть объяснение как это работает.