Как растянуть картинку вниз до конца страницы? — Вопрос от Василий Писковой

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16593)
  • Платные услуги (2145)
  • Вопросы по uKit (82)

Контент-модули

  • Интернет-магазин (1438)
  • Редактор страниц (236)
  • Новости сайта (500)
  • Каталоги (809)
  • Блог (дневник) (113)
  • Объявления (295)
  • Фотоальбомы (434)
  • Видео (255)
  • Тесты (60)
  • Форум (578)

Продвижение сайта

  • Монетизация сайта (220)
  • Раскрутка сайта (2460)

Управление сайтом

  • Работа с аккаунтом (5343)
  • Поиск по сайту (427)
  • Меню сайта (1767)
  • Домен для сайта (1536)
  • Дизайн сайта (13485)
  • Безопасность сайта (1486)
  • Доп. функции (1308)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (433)
  • Почтовые формы (319)
  • Статистика сайта (198)
  • Соц. постинг (213)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (645)
  • PHP и API на uCoz (236)
  • SMS сервисы (10)
  • Вопросы по Narod.
    ru (429)
  • Софт для вебмастера (39)

…

Jetpack Compose | Установка размеров

Последнее обновление: 27.09.2021

Для установки размеров компонентов в Jetpack Compose определен целый ряд модификаторов:

  • Modifier.height(): устанавливает высоту

  • Modifier.width(): устанавливает ширину

  • Modifier.fillMaxHeight(): растягивает компонент по всей длине контейнера

  • Modifier.heightIn(): устанавливает минимальную и максимальную высоту

  • Modifier.widthIn(): устанавливает минимальную и максимальную ширину

  • Modifier. size(): устанавливает размер

  • Modifier.sizeIn(): устанавливает минимальный и максимальный размер

Для установки применяются единицы dp (device-independent pixels или независимые от устройства пиксели).

Например, установим для компонента Text высоту и ширину:


package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(
                "Hello METANIT. COM",
                fontSize=22.sp,
                modifier = Modifier.background(color=Color.Yellow).width(300.dp).height(200.dp)
            )
        }
    }
}

Обратите внимание, как устанавливаются значения — после числа перед dp идет точка.

С помощью модификатора size() можно объединить установку высоты и ширины:


package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super. onCreate(savedInstanceState)
        setContent {
            Text(
                "Hello METANIT.COM",
                fontSize=22.sp,
                modifier = Modifier.background(color=Color.Yellow).size(width = 300.dp, height= 200.dp)
            )
        }
    }
}

Если высота и ширина совпадают, то можно передать в функцию size() только одно общее значение. Например, установка ширины и высоты в 300 единиц:

modifier = Modifier.background(color=Color.Yellow).size(300.dp)

Установка минимальных и максимальных размеров

Модификаторы heightIn() и widthIn() принимают два значения — минимальные и максимальные значения. Например:


modifier = Modifier.background(color=Color.Yellow)
                    .widthIn(min = 100.dp, max = 400.dp)
                    .heightIn(min=50.dp, max=300.dp)

С помощью sizeIn можно сократить определение размеров:


modifier = Modifier. background(color=Color.Yellow)
                    .sizeIn(minWidth = 100.dp, maxWidth = 400.dp, minHeight= 50.dp, maxHeight= 300.dp)

Растяжение по всей длине и ширине контейнера

Отдельная группа модификаторов позволяет растянуть компонент по все длине и(или) ширине контейнера:

  • Modifier.fillMaxWidth(): растягивает компонент по всей ширине контейнера

  • Modifier.fillMaxHeight(): растягивает компонент по всей высоте контейнера

  • Modifier.fillMaxSize(): растягивает компонент по всей длине и ширине контейнера

Например, растянем компонент Text по всей ширине и длине контейнера:


package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx. compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(
                "Hello METANIT.COM",
                fontSize=22.sp,
                modifier = Modifier.background(color=Color.Yellow).fillMaxSize()
            )
        }
    }
}

В качестве параметра модификаторы Modifier.fillMaxWidth(), Modifier.fillMaxHeight() и Modifier.fillMaxSize() принимают множитель, который устанавливает, какую часть от размеров контейнера займет компонент. Это значение имеет тип Float и находится в диапазоне от 0.0 до 1.0. Например:


package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx. activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(
                "Hello METANIT.COM",
                fontSize=22.sp,
                modifier = Modifier.background(color=Color.Yellow).fillMaxSize(0.5f)
            )
        }
    }
}

Переданное в функцию fillMaxSize() значение 0.5f указывает, что компонент получит половину (или 0.5) от ширины и длины контейнера.

НазадСодержаниеВперед

Как растянуть фон в GIMP | Малый бизнес

Дэвид Видмарк

GIMP, бесплатная программа Gnu Image Manipulation, является отличным ресурсом для любого малого бизнеса с ограниченным бюджетом, которому требуется профессионально выглядящая графика. Если у вас есть изображение, которое вы хотите использовать в качестве фона для своей работы, растянуть его до нужного размера — это простой двухэтапный процесс. Первый шаг — указать, какой размер должно занимать изображение, а второй шаг — просто масштабировать изображение до этого размера.

Изменение размера холста

  1. Запустите GIMP и откройте изображение, которое вы хотите использовать в качестве фона в вашем проекте, выбрав «Открыть» в меню «Файл». Для достижения наилучших результатов выберите изображение с высоким разрешением, близкое к тому размеру, который вам нужен. Слишком сильное растяжение небольшого изображения с низким разрешением может привести к пикселизации, в результате чего изображение будет выглядеть зернистым.

  2. Выберите «Размер холста» в меню «Изображение». Откроется панель «Задать размер холста изображения».

  3. Щелкните значок «Цепь» рядом с шириной и высотой, чтобы разблокировать пропорции высоты и ширины. Когда звено в цепи разорвано, пропорции не скованы. Если вы измените высоту или ширину, когда ссылка не повреждена, другой размер автоматически подстроится, чтобы сохранить те же пропорции.

  4. Щелкните меню «Пиксели», чтобы изменить единицу измерения на «Дюймы» или любую другую общепринятую единицу измерения.

  5. Введите нужные значения в текстовые поля «Ширина» и «Высота», затем нажмите кнопку «Изменить размер». Размер холста автоматически изменяется, и изображение теперь находится в верхнем левом углу холста.

Растягивание изображения

  1. Выберите инструмент «Масштаб» на панели инструментов. Этот значок представляет собой квадрат со стрелкой, указывающей вниз из одного угла.

  2. Щелкните изображение. Откроется панель «Масштаб», и вдоль границы изображения появятся восемь квадратных маркеров.

  3. Щелкните значок «Цепь» на панели «Масштаб», если вы хотите ограничить пропорции. Ограничиваете ли вы пропорции изображения или нет, зависит от того, насколько сильно вам нужно растянуться и что изображено на изображении. Даже человеческое лицо часто можно растянуть на пять процентов без искажения.

  4. Перетащите правый нижний угол изображения в правый нижний угол холста, чтобы заполнить холст изображением. Либо перетащите правый или нижний «манипулятор» на краю изображения. Вы также можете указать точные пропорции изображения в текстовых полях «Ширина» и «Высота» на панели «Масштаб».

  5. Нажмите «Ввод» на клавиатуре, чтобы принять изменения, внесенные в изображение.

  6. При необходимости переместите изображение, выбрав инструмент «Переместить» и перетащив изображение на место. В этом нет необходимости, если вы не заблокировали пропорции при изменении размера изображения.

  7. Сохраните изображение под новым именем, выбрав «Сохранить как» в меню «Файл». Это не позволит вам писать поверх оригинала.

Список литературы

  • GIMP: Canvas Size
  • GIMP: Scale Image

Ресурсы

  • GIMP: Загрузки

Писатель Bio

A Professional Pulater Pulater и Professional Proveriefers Pulater и Professional Hoperments Weedmarmsments Weedmarms. технологий, средств массовой информации и маркетинга более 20 лет. Он преподавал информатику в Алгонкинском колледже, основал три успешных предприятия и написал сотни статей для газет и журналов Канады и США.

Растягивание фона SVG — Общее — Forum

samulir (Самули Р.)

1

Можно ли сделать фон раздела 100% ширины И высоты без обрезки? У меня есть векторное изображение, которое может растягиваться вместе с разделом.

Спасибо!

1 Нравится

Винсент (Венсан Бидо)

2

Да, не только с SVG, но и со всеми форматами.

http://vincent.polenordstudio.fr/snap/19dahww.jpg

1 Нравится

самулир (Самули Р.)

3

Эй, Винсент! Мне кажется, это не работает…

482674×1160 284 КБ

1 Нравится

Винсент (Венсан Бидо)

4

Плохо, вы правы, это не работает с SVG.

1 Нравится

(Джефф Селсер)

5

Эта статья достойна внимания.

1 Нравится

самулир (Самули Р.)

6

Спасибо!! посмотрю

1 Нравится

Винсент (Венсан Бидо)

7

Вот код, необходимый для сброса соотношения сторон.

 .stretched-logo-bg {
    background: url("../img/curve.svg#svgView(preserveAspectRatio(none))") по центру без повторения;
    размер фона: 100% 100%;
}

1 Нравится

самулир (Самули Р. )

8

Большое спасибо, Винсент!! Я попробую это!

янм (Элиас)

9

Привет,

это хорошее решение от Винсента. Но у меня был случай, когда это было бы очень раздражающим по некоторым причинам. Я обнаружил, что есть другой подход:

Вы можете открыть свой SVG в текстовом редакторе (Sublime и т. д.) и жестко закодировать его прямо в свой SVG.

1. Первый шаг , Найдите:
SVG

и изменение до
SVG

2. Второй шаг , добавьте атрибут . %» saveAspectRatio=»none»

3. Третий шаг:
Сделайте свой SVG фоновым изображением с «обложкой»

Надеюсь на помощь

4 лайков

Вера (Вера)

10

Это золото. Большое спасибо!

Паскаль_Помаска (Паскаль Помаска)

11

Удивительная помощь! Большое спасибо

Мэгги (мэгги)

No related posts.