Примечания:

• В наши дни вам почти наверняка не нужны префиксы браузера, то есть вы можете просто использовать background-size: contains . См. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility

.

• Если вы используете Autoprefixer (включенный во многие инструменты сборки и настройки сборки), он автоматически добавит вам все необходимые версии с префиксом, что означает, что вы можете сделать background-size: содержит , даже если в текущих версиях основных браузеров по-прежнему требуются префиксы.

• Вы можете включить размер в сокращенное свойство background с синтаксисом background: / . Это будет выглядеть как

 .контейнер{
    фон: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) центр без повторов/содержать;
    высота: 150 пикселей;
    ширина: 300 пикселей;
}
 

вы должны использовать:

 .container{
    размер фона: 100%;
}
 

Вам просто нужно заменить «fixed» на «center» в вашей «фоновой» инструкции.

Вот так:

 фон: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) центр без повторов;
 

JSFiddle здесь: https://jsfiddle.net/ncrcfduz/2/

 .container{
    размер фона: содержит;
}
 

Я так решил. Вы можете установить свой код следующим образом:

Этот трюк должен работать, но он не будет поддерживать соотношение сторон изображения по умолчанию.

 размер фона: 100% 100%;
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как сделать так, чтобы изображение пропорционально помещалось в элемент flexbox или в разделы — HTML и CSS — Форумы SitePoint

Форумы SitePoint | Сообщество веб-разработки и дизайна

Гроули 14 апреля 2022 г. , 17:38

#1

Я посмотрел пару туториалов по коду изображения и до сих пор не могу понять! ура.

изображение695×442 72,4 КБ

SamA74 14 апреля 2022 г., 17:51

#2

Я не совсем понимаю, о чем вы спрашиваете, но я думаю, что объектное соответствие — это свойство, которое вы ищете.

Или в этом случае, когда они являются фоновыми изображениями background-size.

Также обратите внимание, что мы не можем видеть изображения в вашей ручке, вам потребуется полный абсолютный URL-адрес.

1 Нравится

ДэйвМаксвелл 14 апреля 2022 г., 18:02

#3

Браузер возьмет изображение и отобразит его в полном размере, если вы не дадите ему инструкции не делать этого, чего вы не сделали, за исключением первого поля.

Если вы добавите размер фона к классу .Controlled (поскольку вы используете его во всех четырех полях), то изображения будут заполнять поля. Это основной вид, к которому вы стремитесь (замените случайные картинки в кодовой ручке)?

изображение1134×488 161 КБ

1 Нравится

Гроули 14 апреля 2022 г., 18:23

#4

У меня не работает.

изображение1299×514 84 КБ

Изображение целиком не помещается в коробку.

СамА74 14 апреля 2022 г., 18:33

#5

Гроули:

Изображение целиком не помещается в коробку.

Тогда вы должны использовать

, содержащий вместо обложки для размера.

1 Нравится

ДэйвМаксвелл 14 апреля 2022 г., 19:06

#6

Громкий:

У меня не работает.

Пожалуйста, определите «у меня не работает». Разница заключается в том, что он изменит размер до НАИБОЛЕЕ БОЛЬШОЙ стороны изображения, чтобы соответствовать пространству, и сохранит соотношение сторон изображения. cover сделает то же самое, но изменит размер по САМОЙ МАЛЕНЬКОЙ стороне изображения, а остальное обрежет.

Это означает, что если наибольший размер меньше размера контейнера, то будет просвечиваться фоновый цвет. С обложкой в ​​той же ситуации изображение будет обрезано там, где это необходимо.

Другими словами, если вы поместите портретное изображение в ландшафтное пространство, произойдет обрезка или проступание.

Демо
Содержит

изображение 1168×583 230 КБ

Обложка

изображение1177×617 266 КБ

4 лайка

Гроули 15 апреля 2022 г., 16:06

#7

Я примерно понимаю эту концепцию.

изображение645×543 113 КБ

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

ПолОБ 15 апреля 2022 г., 16:24

#8

Гроули:

Я примерно понимаю эту концепцию.

Кажется, нет

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

Если у вас есть изображение высокого худого человека, и вы растянете его на свою карточку, вы получите изображение невысокого толстого человека Это не имеет ничего общего с CSS, а просто законы вселенной.

Может быть, мы неправильно поняли, чего вы хотите, и как вы ожидали, что они подойдут? Можешь нарисовать? Как бы вы хотели, чтобы это выглядело?

1 Нравится

SamA74 15 апреля 2022 г., 16:27

#9

Громкий:

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

Единственный способ сделать это, не искажая изображение, — это чтобы контейнер имел то же соотношение сторон, что и изображение.

Но у вас есть изображения в книжной ориентации и контейнеры в альбомной. Это никогда не сработает.
Квадратные штифты, круглые отверстия…

2 нравится

Громкий 15 апреля 2022 г., 16:41

#10

На самом деле я это понимаю, но я думал, что будет какой-то другой код, который сделает это за меня, например, поместит все изображение в контейнер, вынув черный bg.

ПолОБ 15 апреля 2022 г., 16:49

#11

Гроули:

, но я думал, что будет какой-то другой код, который сделает это за меня, как подходит для

То, о чем вы спрашиваете, физически невозможно в любом измерении времени или пространства

Я не хочу осветить проблему, но как изображение может соответствовать черному пространству, если вы не искажаете его? Или вы используете обложку и перекрываете ее, что вам уже предлагалось, но, конечно, изображение должно быть обрезано, чтобы это произошло.

Не думаю, что вы уловили суть.

Как я сказал выше, вы можете это нарисовать?

То, о чем вы спрашиваете, похоже на попытку подогнать идеальный круг к продолговатой форме. Это невозможно, если только вы не превратите его в эллипс или не увеличите его размер, чтобы больше не видеть весь круг.

Не волнуйтесь, вы не первый, кто задает этот вопрос

1 Нравится

Гроули 15 апреля 2022 г., 17:05

#12

Понятно, я изменю изображение, чтобы оно соответствовало тому, что сказал Сэм.
и будет некрасиво

PaulOB 15 апреля 2022 г., 17:48

№13

Гроули:

и будет выглядеть некрасиво

Это будет ошибкой вашего дизайна, а не ошибкой css.

Я не хочу вдаваться в подробности, но я все еще не думаю, что вы полностью поняли концепцию. Как изменить существующее изображение, чтобы оно соответствовало пространству, для которого оно не предназначалось? Даже в вашем пакете с краской вы в конечном итоге замените круг на эллипс, чтобы он подходил, но это все равно можно сделать в css. Или вы обрежете ширину и высоту, чтобы они подходили, что также можно сделать в css.

Что вам действительно нужно, так это выбирать изображения, соответствующие соотношению сторон пространства, в которое вы хотите их вписать.

В первом примере вы помещаете фоновое изображение в пространство размером 200 x 120 пикселей. Тем не менее, ваши изображения кажутся выше, чем шире, поэтому они никогда не впишутся в это пространство. Если вы сделали поле выше или действительно использовали изображения в html, то, по крайней мере, поле расширится, чтобы сохранить его содержимое, хотя проблема заполнения ширины и высоты изображением все еще остается.

Как я уже говорил трижды, ты действительно можешь рисовать то, что хочешь? Нарисуйте коробку на листе бумаги, который соответствует размеру вашей коробки 220 x 120 пикселей, а затем примерно нарисуйте одно из ваших изображений, сидящих в этой коробке. Вы не сможете этого сделать, потому что они не подходят. Если они не вписываются в реальный мир, то они не вписываются и в онлайн-мир.

Звучит так, будто я веду себя неловко, но если я неправильно понял, чего вы хотите, то возможны только возможные вещи:)

2 нравится

Гроули 15 апреля 2022 г., 18:54

№14

Я понимаю, что вы имеете в виду, серьезно, ty для вашего времени.

СамА74 15 апреля 2022 г. , 19:33

№15

Это ваши варианты с замещающим изображением собаки, но, что важно, с тем же соотношением сторон, что и ваше изображение.

2 нравится

Джон_Бетонг 15 апреля 2022 г., 23:44

№16

Гроули:

Изображение целиком не помещается в коробку.

Давным-давно я мучился с отображением миниатюр и в конце концов решил, что лучше всего показывать масштабированное изображение на прозрачном фоне.

dresden_phoenix 19 апреля 2022 г., 4:56

# 19

Во-первых, есть некая «физика», которой неизменно будут следовать.

При работе с изображениями различных пропорций (независимо от размера), которые изначально ограничены единственным набором размеров. у вас есть только 3 варианта.

1. То, что вы знаете как «почтовый ящик». Вы можете быть знакомы с этим эффектом, когда смотрите старые фильмы на современных телевизорах. Одна (1) ось, обычно горизонтальная, сжимается, чтобы соответствовать размеру другой оси, в результате чего другая ось не полностью покрывает ее размеры… остается черная область или «почтовый ящик»… В почтовый ящик: изображение:дисплей:блок; выберите ОДНО свойство оси (высота/ширина) и установите его на: 100%, а другое — на авто.

2. Обрезка выходит за пределы области изображения. Существует дополнительное эстетическое соображение при использовании этого метода в автоматизации. Например, обрезка краев пейзажа эффективна, равномерная обрезка краев портрета (подбородок, лоб и оба уха) будет казаться неуместной [о… и само ваше изображение могло быть предварительно обрезано в художественном направлении, что создает дополнительные проблемы] .