Разрешить строке сетки увеличивать высоту от одного столбца, но не от другого
Моя цель — сделать так, чтобы images имел такую же высоту, что и description. В настоящее время images может быть намного больше, если источник изображения очень высокий по вертикали:
article {
display: grid;
grid-template-areas: "title title" "images description";
resize: both;
overflow: hidden;
}
.title {
grid-area: title;
padding: 8px;
}
.images {
grid-area: images;
}
img {
display: block;
/* max-width: 100%; */
}
.description {
grid-area: description;
padding: 8px;
}<article>
<div class = "title">There are many other articles like this one on the page</div>
<div class = "images">
<img alt = "random image" src = "https://i.sstatic.net/MB9ui48p.png">
<img alt = "random image" src = "https://i.sstatic.net/MB9ui48p.png">
</div>
<div class = "description">The description of the thing. The description of the thing. The description of the thing. The description of the thing. The description of the thing. The description of the thing.</div>
</article>Установка CSS для img {max-width: 100%;} дает мне именно то, что я хочу, при условии, что изображение не слишком велико по вертикали. Если изображение большое по вертикали, то div .images расширяется слишком сильно, чтобы покрыть все изображение шириной 100%, а затем затмевает div .description справа от него.
Большинство ответов, которые я видел здесь, в настройках SO, упоминают max-height: 100%, но в моем случае это не имеет значения. Другие предлагали использовать img в качестве фона для div, но это похоже на хак.
Я попробовал сделать контейнер .images флексбоксом, но ограничение по вертикали также не повлияло.
На данный момент лучше всего работала установка img {max-height: 50vh}, но это не совсем то же самое, что сделать .images такой же высоты, как .description.
@MarcInglis Хорошо замечено! Нет, родительский элемент и контейнер не имеют заданной высоты. Проблема в том, что description может различаться по длине/высоте, поэтому я не знаю, что туда можно поместить. Я попытался изменить их сейчас на {height: 100%}, но это не имело никакого значения.
Я просто подумал, что теперь могу вместо сетки поставить <div display:flex>images description</div>, но столкнулся с той же проблемой, когда невозможно заставить изображения иметь высоту описания в этом флексбоксе.
Хммм, но я думаю, что вы правы, мне нужно сделать <div>images description</div> и установить для этого div-обертки заданную высоту. Тем не менее, возможно, просто невозможно заставить .description расти настолько, насколько он хочет, но не .images?
Вы хотите, чтобы папка изображений была такой же ширины, как и изображение, или составляла 50 % ширины макета?
@ralph.m ширина работает хорошо, и да, я хотел, чтобы она составляла ~ 50% макета (по какой-то причине в этом макете сетки она никогда не составляет ровно 50%, но достаточно близко для моих целей)
То есть, если текста описания не так много, между ним и изображением может быть много места?
@ralph.m извини, ты прав! это будет варьироваться... Я не могу иметь ширину и высоту одновременно 50%. Но что для меня действительно важно, так это только высота, ничего страшного, если ширина сильно варьируется, пока изображение не растягивается.
Ответы 2
Вот решение для сетки, которое использует запросы контейнера, которые позволяют сетке игнорировать размер изображений:
article {
display: grid;
grid-template-areas: "title title" "images description";
grid-template-columns: 1fr 1fr;
resize: both;
overflow: hidden;
}
.title {
grid-area: title;
padding: 8px;
}
.images {
grid-area: images;
container-type: size;
overflow-y: auto;
}
img {
display: block;
width: calc(100cqw - 15px);
}
.description {
grid-area: description;
padding: 8px;
}<article>
<div class = "title">There are many other articles like this one on the page</div>
<div class = "images">
<img alt = "random image" src = "https://i.sstatic.net/MB9ui48p.png">
<img alt = "random image" src = "https://i.sstatic.net/MB9ui48p.png">
</div>
<div class = "description">The description of the thing. The description of the thing. The description of the thing. The description of the thing. The description of the thing. The description of the thing.</div>
</article>width: calc(100cqw - 15px); на ваших изображениях их размер должен быть равен ширине их контейнера за вычетом ширины любой полосы прокрутки (вам может потребоваться отрегулировать 15 пикселей, если при тестировании они переполняются)
Это решение идеально!! Это именно то, что я хотел, за исключением одного: можно ли изменить размер img по размеру контейнера вместо переполнения прокрутки?
@flen Да. Доступны следующие варианты: прокрутка изображений, растягивание изображений, крошечные изображения.
Спасибо! Как сделать изображение маленьким? Извините, я, кажется, немного запутал, но вместо того, чтобы ширина идеально соответствовала 50% страницы, я бы предпочел, чтобы ширина менялась, но изменял размер изображения (и сохранял его масштаб). , вместо того, чтобы растягивать его), поэтому высота будет ограничена высотой описания (т. е. изображение будет крошечным).
Похоже, Ральф уже решил это за тебя.
Это правда, но только для 1 изображения (или 2, если они склеены в другом месте, а затем добавлены как 1 img)
Один из способов сделать это такой, хотя при небольшом описании вы получите много места между изображением и текстом.
article {
display: grid;
grid-template-areas: "title title" "images description";
grid-template-columns: 1fr 1fr;
resize: both;
overflow: hidden;
}
.title {
grid-area: title;
background: #e7e7e7;
}
.images {
grid-area: images;
position: relative;
height: 100%;
background: #f49c9c;
}
.description {
grid-area: description;
background: #f7f7f7;
}
.images>img {
position: absolute;
height: 100%;
max-width: 100%;
object-fit: contain;
object-position: 0 0;
}<article>
<div class = "title">There are many other articles like this one on the page</div>
<div class = "images">
<img src = "https://unsplash.it/200/300">
<img src = "https://unsplash.it/200/300">
</div>
<div class = "description">The description of the thing</div>
</article>Вы можете позволить описанию занять больше места, если хотите, или настроить изображение так, чтобы оно покрывало все пространство, но это часто будет выглядеть не очень красиво.
Обновлено: одно ограничение здесь заключается в том, что вы можете иметь только одно изображение. Я поставил два, но они сидят друг на друге. Если вам нужно несколько изображений, это не сработает!
Описание кажется обрезанным при больших размерах
У меня иногда бывает 2 изображения...! Это может быть 1 или 2 изображения. Но это очень разумное решение для 1 img, я попробовал его на своей странице, и оно отлично сработало, за исключением ширины некоторых изображений, которая превышала позицию: абсолютную, но это, вероятно, тоже можно настроить.
Ах, хорошие замечания по поводу длинного текста. Я обновил его, чтобы иметь дело с более длинным текстом. Один из хаков для двух изображений — объединить два изображения в одно…
Ой, это было больно, но я придумал пару других способов сделать 2 изображения с помощью этого кода. Самый простой — добавить правила CSS: img {height: 50%;} img:nth-child(2) {top: 50%;}
Имеет ли родительский контейнер (например, статья или ее родительский элемент) определенную высоту? В противном случае вы можете не увидеть предполагаемого поведения. И есть ли в статьях столбцы и строки сетки с заданной высотой? Я понимаю, что текст может быть разного размера, но если вы можете управлять этими элементами, у вас будут изображения и описание одинакового размера: .images, .description { height: 100%; }