Скрытие и отображение частей изображений
Можно динамически «обрезать» как фоновые, так и передние изображения при изменении ширины макета, решая проблему переполнения изображений фиксированной ширины на гибкой странице.
Это руководство немного адаптировано из главы 9 моей книги «Гибкий веб-дизайн: создание гибких и эластичных макетов с помощью CSS ». Вы можете бесплатно загрузить большую часть главы 9 в формате PDF на сопутствующем сайте гибкого веб-дизайна, а также загрузить файлы HTML, CSS и изображения, прилагаемые к этому руководству.
Поскольку область, доступная для отображения изображения в гибком макете, изменяется на лету, ваши изображения также могут нуждаться в этом. Хотя изображения с фиксированной шириной могут работать в гибких макетах — если они не слишком велики или у вас установлена соответствующая минимальная ширина — существует множество способов динамически изменять область экрана, занимаемую изображением.
Я уже писал о том, как сделать изображения буквально масштабируемыми, но еще один способ изменить размер области экрана, занимаемой изображением, — это динамически изменять, какая часть изображения отображается в любой момент времени.
Вы можете создать переменный эффект кадрирования с фоновыми или передними изображениями. Оба выглядят одинаково, но каждый специально подходит для разных ситуаций.
Переменная обрезка с фоновыми изображениями
Помещение изображения, которое вы хотите динамически обрезать, в фоновом режиме идеально, когда изображение носит чисто декоративный характер. Этот метод позволяет сохранить изображение в CSS с другими декоративными изображениями, поэтому, если вы позже измените внешний вид сайта, все декоративные изображения можно будет изменить в одной таблице стилей вместо замены нескольких 9.0018 img
Чтобы использовать фоновое изображение CSS, вам сначала понадобится элемент, на который будет помещен фон. В этом примере будет использоваться div :
<дел>
Раздел полностью пуст; он не содержит содержимого, а существует просто для хранения фонового изображения. Если у вас есть более смысловой элемент, на который можно повесить фон, используйте его. Например, возможно, изображение, которое вы хотите динамически обрезать, находится над элементом h4 и соответствует ему по ширине. Вы можете добавить изображение в качестве фона к элементу h4 и дать h4 достаточное верхнее заполнение, чтобы его текст располагался под изображением, а не поверх него.
Затем создайте правило для этого div , которое устанавливает изображение в качестве фона без мозаики:
раздел # фон {
фон: url(styx.jpg) без повторов;
граница: 2px сплошная #000;
} Я также добавил границу к этому div , чтобы вы могли легко видеть, где лежат его края.
Прямо сейчас, без содержимого в div , он свернется до нулевой высоты. Добавьте размеры в div , чтобы открыть его:
раздел # фон {
ширина: 50%;
высота: 330 пикселей;
фон: url(styx.jpg) без повторов;
граница: 2px сплошная #000;
} Совет. Чтобы динамически изменять высоту изображения вместе с шириной или вместо нее, используйте гибкое значение свойства height .
Для ширины задано некоторое гибкое измерение — либо процент, как я сделал здесь, либо значение em, чтобы сделать его эластичным — так что div может изменяться по ширине, чтобы отображать большую или меньшую часть изображения. Высота устанавливается равной высоте изображения в пикселях, поэтому вся высота изображения всегда будет отображаться.
Раздел теперь всегда будет на 50 процентов шире окна просмотра; его фоновое изображение не меняется в размере, но в той или иной степени обрезается с правой стороны.
Однако это конкретное изображение выглядело бы лучше, если бы оно было обрезано слева, так как морда кошки находится на правой стороне фотографии. Чтобы указать, откуда изображение будет обрезано, используйте свойство background-position или его сокращение в свойстве background , чтобы изменить выравнивание изображения в пределах раздел :
раздел # фон {
ширина: 50%;
высота: 330 пикселей;
фон: url(styx.jpg) без повтора справа
;
граница: 2px сплошная #000;
} Изображение теперь привязано к правой стороне div , поэтому более или менее его левая сторона видна по мере изменения размера div .
Это все CSS, необходимые для работы базовой техники переменной обрезки, но вы можете добавить несколько других улучшений, если хотите. Например, прямо сейчас, когда div превышает ширину изображения, внутри div отображается пустое пространство.
Есть несколько способов справиться с этим. Вы также можете добавить цвет фона в div , который заполнит все пространство, которое не может заполнить изображение; если вы смешаете край изображения с этим фоновым цветом, эффект может выглядеть бесшовным. Или вы можете добавить максимальную ширину к div никогда не может увеличиваться или уменьшаться выше определенных
точек изображения.
Переменная обрезка изображений переднего плана
Если изображение, которое вы хотите динамически обрезать, представляет собой функциональное содержимое, вам нужно сохранить его в качестве изображения переднего плана, поместив его в (X)HTML с помощью элемента
- Передает ли изображение информацию, которую я должен поместить в виде текста в
альтатрибут? - Хочу ли я убедиться, что изображение всегда печатается, потому что без него распечатка
была бы бессмысленной или неполной? - Связать изображение?
Если ответ на любой из этих вопросов утвердительный, изображение является содержимым и должно быть сохранено в (X)HTML.
Фоновые изображения CSS не могут достичь ни одной из этих целей — по крайней мере, не без некоторых сложных обходных путей и хаков, которые довольно глупы, учитывая, как легко простой 9Всего этого может добиться элемент 0018 img
Как и в случае с вариантом метода переменной обрезки с фоновым изображением, вам понадобится некоторый блочный элемент в (X)HTML для хранения изображения. Мы снова будем использовать div ; на этот раз он не будет пустым, а будет содержать элемент img:
<дел>
Примечание. Элемент img имеет атрибут alt , обеспечивающий текстовый эквивалент изображения. Вы не можете сделать это с фоновым изображением CSS.
Как и прежде, div должен иметь гибкую ширину и высоту, установленную в соответствии с высотой изображения в пикселях:
раздел # передний план {
ширина: 50%;
высота: 330 пикселей;
граница: 2px сплошная #000;
} На данный момент все, что у нас есть, это обычный div , содержащий обычное изображение — пока нет ничего, что делало бы этот метод переменной обрезки.
Если изображение больше, чем div , оно не обрезается, а просто переполняется.
Чтобы получить эффект обрезки, добавьте overflow: hidden; к правилу CSS:
раздел # передний план {
переполнение: скрыто;
ширина: 50%;
высота: 330 пикселей;
граница: 2px сплошная #000;
} Теперь любая часть изображения, выходящая за пределы div , скрыта от просмотра.
Опять же, было бы лучше, если бы это изображение было обрезано с левой стороны, а не с правой. Мы не можем использовать background-position 9На этот раз свойство 0019, потому что это не фоновое изображение. Чтобы изменить то, как изображение переднего плана привязывается к его родителю, вы можете плавать изображение:
div # передний план изображения {
поплавок: справа;
} Это привязывает изображение к правой стороне div , поэтому более или менее его левая сторона отображается по мере изменения размера 
Использование изображения переднего плана приводит к эффекту, который выглядит точно так же, как при использовании фонового изображения, но изображение переднего плана имеет альтернативный текст, и вы также можете легко добавить ссылку на него.
Опубликовано
Категории: Учебники
Теги: CSS, эластичный, гибкий, гибкий веб-дизайн, HTML, изображения, жидкость, разметка, адаптивный веб-дизайн
Изображение div "Обложка" (но не фон) - Общие - Форум
Port_of_Folio (Порт Фолио) 1
Я почти уверен, что это невозможно, но решил спросить.
Мне нравится, что фоновое изображение в div может быть установлено на «обложку», заполняя высоту или ширину при обрезке и не искажая изображение, но для динамического контента мне нужно, чтобы это было изображение, помещенное в div, которое установите «переполнение скрыто».
Так как изображения, поступающие в пространство, имеют различные пропорции, было бы здорово, если бы изображение могло реагировать со свойством «обложки». Либо заполнение 100% высоты (для большего количества горизонтальных изображений), либо 100% ширины (для большего количества вертикальных изображений). И обрезать по центру. Это почти можно сделать с помощью flexbox, но изображения будут разбиты или растянуты.
Насколько я могу судить, это невозможно. Какие-нибудь трюки?
Разместил ссылку на свой ресурс ниже. Это опубликованная страница, а рассматриваемая область — изображения «Избранные свойства».
http://ellington-realty-group.webflow.io/
Если вы уменьшите ширину браузера, вы увидите пурпурный фон div, который я хотел бы заполнить.
Вот моя общедоступная ссылка: https://preview.webflow.com/preview/ellington-realty-group?preview=56ddc38999d80607537ceeb4d7ed9e83
(как получить доступ к общедоступной ссылке)
Siton_Systems (Эзра Ситон) 2
Первая проблема:
Удалите CSS из изображения (или используйте изображения большего размера!):
max-width: 100%
Свойство CSS max-width на 100% → изображение заполнит ширину своего родительского элемента элемент, но не будет отображать больше, чем его фактический размер (в вашем примере именно поэтому мы видим «пурпурный фон» — ваши изображения маленькие <300 пикселей)
в адаптивном коде:
.responsive-img{
ширина: 100%;
высота: авто;
}
- Теперь, если вы хотите сделать УРОЖАЙ:*
- Вариант первый- Фотошоп: Обрезать таким образом изображения вручную (фотошопом или любым другим способом) - безопасный способ.
- Второй вариант — два стиля: Создайте два стиля (.horizontal и .vertical) и поэкспериментируйте с этим.
- Третий вариант — скрытое переполнение : Сделать изображение центральным (со скрытым трюком flex и overflow) - или любая подобная идея. Но если на изображении есть лица и тому подобное, вы не можете быть на 100% уверены, что не обрезаете лицо или важные вещи.
Но если на изображении есть лица и тому подобное, вы не можете быть на 100% уверены, что не обрезаете лицо или важные вещи.А также у вас есть этот трюк CSS:
И этот stackoverflow:
https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div -контейнер
https://stackoverflow.com/questions/17320587/resize-to-fit-image-in-div-and-center-horizontally-and-vertically
Port_of_Folio (Порт Фолио) 3
Большое спасибо за вдумчивый ответ.
- К изображениям не применялся CSS
CSS-трюки «Подгонка объекта» — это концепция, которую я пытаюсь реализовать (но хотел достичь в Webflow Designer. Не представляется возможным. Добавление в список пожеланий:)
Photoshop не вариант, так как все изображения ввод из большой базы данных, используя все виды размеров и соотношений изображений.
В итоге я перейду к фоновым изображениям, используя «обложку» в качестве образца, но скажу моему серверному разработчику использовать класс «Подгонка объекта» на сайте, интегрированном с базой данных.
Еще раз спасибо!
Siton_Systems (Эзра Ситон) 4
Это деклерация из вашего кода (исходный код)
max-width: 100%
From SEO аспект лучше использовать img (с alt), чем пустые div с изображениями bg + доступность (если кто-то выключит CSS или использует режим READ, он не увидит «ничего» для изображений) + W3C + улучшенный/читаемый DOM
Добро пожаловать
система (система) Закрыто
