#css #image #next.js #image-resizing #next-images
Вопрос:
Итак, у меня есть контейнер div и Image компонент в нем. Я хочу, чтобы высота изображения была равна 100% высоты контейнера, а ширина контейнера автоматически определялась на основе ширины изображения в соответствии с его соотношением сторон. Когда я использую обычный img тег, это работает без проблем, но в случае следующего Image компонента изображение остается шириной 0px . Потому что он хочет, чтобы я определил фиксированную ширину контейнера. ? Как я могу достичь того, чего хочу ?
То, что я делаю, это:
для div:
div {
height: 50px;
width: auto;
}
для компонента изображения:
<Image src="..." alt="..." layout="fill" />
Ответ №1:
Я думаю, что самый простой способ-просто определить ширину div в ems или rems и определить то же самое для изображения, чтобы оно было точной длины, а родительский элемент имел соотношение с изображением и самим div. Хорошего дня 🙂
Комментарии:
1. Спасибо, что нашли время ответить, но проблема в том, что изображение помещено в контейнер. Например, соотношение изображений равно: 2:1. Это означает, что если я установлю ширину контейнера 150 пикселей, а высоту 50 пикселей, размер изображения составит 100 пикселей * 50 пикселей, оставив 50 пикселей ширины контейнера пустыми. Это не было бы проблемой, если бы я знал соотношение изображений, но в моем случае источник изображения является динамическим, а соотношение не фиксировано, поэтому я также не могу указать такое же соотношение для контейнера;
2. Единственной лазейкой оттуда было бы жестко закодировать это изображение шириной 150 пикселей, но оно выглядело бы действительно отвратительно, но есть и обратная сторона, если дизайн позволяет вам закодировать сам div размером 100 пикселей или около 20 пикселей, по моему выбору, это был бы правильный путь! Надеюсь, это немного поможет.
Ответ №2:
Насколько я знаю, изображение в next js имеет одно большое преимущество: ленивая загрузка, сохраняющая пространство, которое будет использоваться изображением после загрузки, без разрушения макета.
Теперь это было бы невозможно, если бы мы заранее не передали размер изображения.
Я знаю пределы этого. Итак, я делаю ставку на эту причину.
И именно по этой причине я использую много img вместо изображения. Но если вы знаете точный размер… лучше используйте изображение.
PS. Разработчики Google участвовали в разработке функций, которые я только что описал.