Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2022, 13:28
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Запутался я с флексами... Помогите с версткой!
Есть контейнер определенного размера.
В нем может быть 1, 2 или 3 картинки произвольного размера, расположенные по вертикали.
Надо загнать их в контейнер так, что бы они не высовывались, ширина была по ширине контейнера, а высоты пропорционально изменялись.
Вот мучаюсь с флексами, но ничего не получается
<style>
.contv {
	margin: 40px 20px;
	border: 3px red solid;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 180px;
	width: 100px;
}
img {
	object-fit: contain;
	flex-shrink: 1;
}
</style>

<body>

<div class="contv">
	<img src='https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg'>
	<img src='https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-1-1-650x488.jpg'>
	<img src='https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-6-650x390.jpg'>
</div>

</body>

Последний раз редактировалось voraa, 17.01.2022 в 13:36.
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2022, 13:50
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Т.е. высота должна пропорционально оригинальной сжиматься\растягиваться, а ширина всегда по ширине контейнера? Боюсь для произвольного размера изображения, не прописанного в коде заранее, так не сделать.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 17.01.2022, 13:58
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Ну ширина может и меньше быть.
Главное по высоте пропорционально.
Там не известно, сколько их будет. Поэтому сразу в стилях не пропишешь высоту в 100%, 50% или 33%. Поэтому даже одинаковой высоты непросто сделать.
Верстку и флекс я не очень знаю, думал может кака то флексами можно заставить их по высоте сжиматься пропорционально.
Ответить с цитированием
  #4 (permalink)  
Старый 21.01.2022, 10:05
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

<style>
        .contv {
            margin: 40px 20px;
            border: 3px red solid;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 180px;
            width: 100px;
        }
        img {
            object-fit: cover;
            height: 60px;
            width: 100%;
        }
</style>
    <div class="contv">
        <img src='https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg'>
        <img src='https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-1-1-650x488.jpg'>
        <img src='https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-6-650x390.jpg'>
    </div>


Если я правильно понял задачу то вот так должно работать?

Последний раз редактировалось ksa, 21.01.2022 в 15:13.
Ответить с цитированием
  #5 (permalink)  
Старый 21.01.2022, 10:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сергей Ракипов,
<style>...<style> добавьте
Ответить с цитированием
  #6 (permalink)  
Старый 21.01.2022, 15:15
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Сергей Ракипов
вот так должно работать?
Если я правильно понял, ТСу нужн сохранить пропорциональную высоту картинок...
А в твоем варианте высота у них одинаковая.
Ответить с цитированием
  #7 (permalink)  
Старый 21.01.2022, 18:00
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Ну похоже действительно нельзя там ничего выудить. Хотя странно. Если я туда вместо картинок загоняю дивы с известными размерами, то все нормально. А у картинок то тоже размер будет известен, когда она загрузится.
Фиг с ними. Выкрутился тем, что беру у них naturalHeight, суммирую, считаю пропорции и загоняю их в style.
Там правда столкнулся с другой необъяснимой штукой. Дело в том, что к моменту работы скрипта, картинки могут еще не успеть загрузится, поэтому код асинхронный. Для промиса загрузки картинки использовал .decode(). Получаю сообщение об ошибке, что картинка не может быть раскодирована! Причем сама картинка показывается!
Сделал маленький тестовый пример - все работает. Возвращаюсь в "боевой" вариант - ошибки.
Написал свой промис на onload - все работает нормально.
Ответить с цитированием
  #8 (permalink)  
Старый 03.02.2022, 01:20
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от voraa
В нем может быть 1, 2 или 3 картинки произвольного размера, расположенные по вертикали.
Надо загнать их в контейнер так, что бы они не высовывались, ширина была по ширине контейнера, а высоты пропорционально изменялись.
Если в прямоугольник размером 180×100 попытаться вписать прямоугольник размером 800×100 так, чтобы их высоты совпадали, то «боковые части» так и так будут «высовываться» — придётся их обрезать.

Сообщение от Aetae
Боюсь для произвольного размера изображения, не прописанного в коде заранее, так не сделать.
В чём тогда смысл display: flex;? Или вам запрещено его использование?

Сообщение от voraa
Ну ширина может и меньше быть.
Главное по высоте пропорционально.
Растянуто пропорционально высоте картин (и как следствие какая-либо из картин может быть больше ширины контейнера, в данном случае вылезшие картины обрезаются, но зато сохраняются точные пропорций высот). Показано действие кода при разном кол-ве элементов.

<style>
body { display: flex; } /* только для примера */
.contv {
	margin: 40px 20px;
	border: 3px red solid;
	height: 180px;
	width: 100px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	align-items: center;
	gap: 3px;
}
.contv > img {
	min-height: 0;
}
</style>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-1-1-650x488.jpg">
</div>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-1-1-650x488.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-6-650x390.jpg">
</div>


Растянуто пропорционально высоте картин, которые были предварительно отмасштабированы до такого размера, чтобы влезать в контейнер. Пропорции высот картин не влезших в контейнер уменьшены во столько раз, во сколько раз больше картина оказалась больше контейнера. Картинки видны не полностью! Показано действие кода при разном кол-ве элементов.

<style>
body { display: flex; } /* только для примера */
.contv {
	margin: 40px 20px;
	border: 3px red solid;
	height: 180px;
	width: 100px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	align-items: stretch;
	gap: 3px;
}
.contv > img {
	min-height: 0;
	object-fit: cover;
}
.contv > img:only-child {
	height: 100%;
}
</style>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-1-1-650x488.jpg">
</div>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-1-1-650x488.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-6-650x390.jpg">
</div>



Сообщение от voraa
Там не известно, сколько их будет. Поэтому сразу в стилях не пропишешь высоту в 100%, 50% или 33%. Поэтому даже одинаковой высоты непросто сделать.
Равномерное распределение высот, в зависимости от кол-ва элементов.
<style>
body { display: flex; } /* только для примера */
.contv {
	margin: 40px 20px;
	border: 3px red solid;
	height: 180px;
	width: 100px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.contv > img {
	min-height: 0;
	flex: 0 1 100%;
	object-fit: cover;
}
</style>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-1-1-650x488.jpg">
</div>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-1-1-650x488.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-6-650x390.jpg">
</div>


Можно также сразу в стилях прописать высоту в 100%, 50% или 33%... (Не рекомендуется — больше элементов требует больше CSS-кода)
<style>
body { display: flex; } /* только для примера */
.contv {
	margin: 40px 20px;
	border: 3px red solid;
	height: 180px;
	width: 100px;
	display: block;
}
.contv > img {
	max-width: 100%;
	margin: auto;
	display: block;
	object-fit: cover;
}
.contv > img:only-child {
	height: 100%;
}
.contv > img:nth-last-child(2):first-child,
.contv > img:nth-last-child(2):first-child + * {
	height: 50%;
}
.contv > img:nth-last-child(3):first-child,
.contv > img:nth-last-child(3):first-child + * {
	height: 33.3333%;
}
</style>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-1-1-650x488.jpg">
</div>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-1-1-650x488.jpg">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-6-650x390.jpg">
</div>
Ответить с цитированием
  #9 (permalink)  
Старый 03.02.2022, 02:38
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

Думаю кирпичную кладку на css он переизобретает ну т.е. используемое в ней выравнивание изображений под размеры сетки.

https://www.google.com/search?q=css+...ome &ie=UTF-8
Ответить с цитированием
  #10 (permalink)  
Старый 03.02.2022, 09:10
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Спасибо, но не совсем то.
Цель можно было примерно описать так -
Приводим все картинки к какой то одной ширине (например ширина контейнера.) Но высоты у них будут разные. Делим контейнер на прямоугольники, пропорционально высотам картинок. В прямоугольник вписываем картинку (object-fit: contain)
Хотелось сделать это просто на CSS, без JS.
CJS результат такой
<style>
body { display: flex; } /* только для примера */
.contv {
    margin: 40px 20px;
    border: 3px red solid;
    height: 200px;
    width: 130px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: stretch;
    gap: 3px;
}
.contv > img {
    min-height: 0;
    object-fit: contain;
}
.contv > img:only-child {
    height: 100%;
}

</style>
<body>
<div class="contv">
    <img src="https://feedlife.com.ua/images/site-feedlife/news/kormlenie-krolej-min.jpg">
</div>
<div class="contv">
    <img src="https://feedlife.com.ua/images/site-feedlife/news/kormlenie-krolej-min.jpg">
    <img src="https://monolith1.izrukvruki.ru/img/catalog/i2/8a/e0/130ea9388-1050x1050-774160528-orig.jpg">
</div>
<div class="contv">
    <img src="https://feedlife.com.ua/images/site-feedlife/news/kormlenie-krolej-min.jpg">
    <img src="https://monolith1.izrukvruki.ru/img/catalog/i2/8a/e0/130ea9388-1050x1050-774160528-orig.jpg">
    <img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<div class="contv">
    <img src="https://feedlife.com.ua/images/site-feedlife/news/kormlenie-krolej-min.jpg">
    <img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<div class="contv">
    <img src="https://monolith1.izrukvruki.ru/img/catalog/i2/8a/e0/130ea9388-1050x1050-774160528-orig.jpg">
    <img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>

<script>
window.addEventListener("load", () => {
	document.querySelectorAll('.contv').forEach( cont => {
		const imgs = [... cont.querySelectorAll('img')];
		const hsum = imgs.reduce((h, im) => h + im.naturalHeight, 0);
		imgs.forEach (im => im.style.height = im.naturalHeight/hsum*100 + '%');
	})
})

</script>
<body>

Последний раз редактировалось voraa, 03.02.2022 в 10:06.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите с версткой сайта Shadow Элементы интерфейса 2 15.06.2018 13:35
Помогите с версткой сайта Shadow Элементы интерфейса 6 15.06.2018 12:11
Помогите с версткой Raptor2013 Общие вопросы Javascript 8 07.08.2012 21:58
Я запутался, помогите с COOKIES Berowz Общие вопросы Javascript 0 18.03.2012 14:49
Помогите пожалуйста с версткой deepslam (X)HTML/CSS 6 06.01.2010 12:52