Как сделать адаптивную ширину css

Как сделать адаптивную картину, чтобы ее поведение при адаптиве было не стандартным

Что я имед ввиду под нестандартным поведенеием. Если, к примеру, сделать картинку на 100% ширину и высоты, то при object-fit: cover картинка постарается "покрыть блок", т.е, если он там не поместится контент картинки может обрезать так, чтобы пропорции сохранились. Это стандарт.

Я хочу попробовать сделать вот так. Предположим у меня есть широкая картинка 1000×100 пикселей. На левом крае картинки нарисован кот, а на правом крае собака. Я хочу, чтобы когда ширина контейнера картинки уменьшалась, собака и кот приблизились к друг другу, а не просто обрезались. Как это можно сделать? введите сюда описание изображения

Как сделать — Адаптивную форму

Измените размер окна браузера, чтобы увидеть эффект (метки и входные данные будут складываться друг на друга, а не рядом друг с другом на меньших экранах):

Создать адаптивную форму

Шаг 1) Добавить HTML

Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP.

Добавить входные данные (с соответствующей меткой) для каждого поля и оберните элемент <div> вокруг каждой метки и ввода, чтобы установить заданную ширину с помощью CSS:

Пример

Шаг 2) Добавить CSS:

Пример

/* Стиль ввода, выделение элементов и текстовых областей */
input[type=text], select, textarea <
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
>

/* Стиль метки для отображения рядом с входными данными */
label <
padding: 12px 12px 12px 0;
display: inline-block;
>

/* Стиль кнопки "Отправить" */
input[type=submit] <
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
>

/* Стиль контейнера */
.container <
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
>

/* Плавающая колонка для этикеток: ширина 25% */
.col-25 <
float: left;
width: 25%;
margin-top: 6px;
>

/* Плавающая колонка для входа: ширина 75% */
.col-75 <
float: left;
width: 75%;
margin-top: 6px;
>

/* Очистить поплавки после столбцов */
.row:after <
content: "";
display: table;
clear: both;
>

/* Адаптивный макет — когда экран меньше 600 пикселей в ширину, сделайте два столбца укладываются друг на друга, а не рядом друг с другом */
@media screen and (max-width: 600px) <
.col-25, .col-75, input[type=submit] <
width: 100%;
margin-top: 0;
>
>

Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.

Совет: Зайдите на наш учебник CSSL Форма, чтобы узнать больше о том, как стилизовать элементы формы.

CSS: Как сделать адаптивную сетку без рамки

Я хотел бы, чтобы отобразить эти дивы в табличной сетке. Он должен быть отзывчивым, и все столбцы должны иметь одинаковую ширину.

Например, когда родитель имеет ширину 1000 пикселей, а div с наибольшей шириной — 300 пикселей, я хочу отобразить 3 столбца с шириной по 300 пикселей. Когда у родителя ширина 600 пикселей, а div с наибольшей шириной — 300 пикселей, я хочу отобразить 2 столбца шириной по 300 пикселей каждый. И так далее.

Обратите внимание: ширина этих разделов может меняться, так как содержимое извлекается из базы данных.

Я читал о фреймворках, которые могли бы это сделать, но для этой маленькой части моего сайта мне не нужна какая-то причудливая структура.

Как вы это сделаете?

Ничего, потому что я не знаю, с чего начать. Я подумал, может быть, кто-то может указать мне в правильном направлении – RobinvdA

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *