Пример

Дружба изображений и флекс-боксов

Всем драсте. Столкнулся с такой проблемой. А именно с проблемой резинового изображения. Как обычно делают резиновое изображение: обвертывают картинку в див, диву задают размеры которые нужны, дальше картинке задают ширину 100% и высоту auto. Это один из способов (я им пользуюсь часто и меня устраивает). Но! Стоит мне задать блоку с классом common_block изображение тут же становится маленьких размеров (сделал скриншот). Проверил по наследованию, там основной параметр принимает только display: flex; больше так особо ничего не влияет на изображение. Возможно дело в слишком много написанных единицах значений rem ? Кто, что может сказать по этому поводу?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

section class="story"> div class="common_block"> div class="story_text"> h1>Story/h1> p class="modular">A (modular, highly tweakable) responsive one-page template designed by a href="#">HTML5 UP/a> and released for free under the a href="#">Creative Commons/a>./p> p class="banner">This is a strong>Banner/strong> element, and it's generally used as an introduction or opening statement. You can customize it's a href="#">style/a>, a href="#">scheme/a>, a href="#">color/a>, a href="#">size/a>, a href="#">orientation/a>, a href="#">content alignment/a>, and a href="#">image position/a>, as well as assign it an optional code>onload/code> or code>onscroll/code> transition modifier (a href="#">details/a>)./p> div class="button"> a href="#">get started/a> /div> /div> div class="story_img"> img src="img/mountains.jpg" alt="mountains"> /div> /div> /section>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106

* { box-sizing: border-box; margin: 0; padding: 0; font-weight: normal; } body { font-family: SourceSansProLight; font-size: 100%; } .story { max-width: 1920px; margin: 0 auto; } .story_text > h1 { font-size: 5.625em; } .modular { font-size: 2.25em; font-family: SourceSansProExtraLight; padding-top: 1.75rem; line-height: 3.438rem; padding-left: 0.1875rem; letter-spacing: -0.17px; } .banner { font-size: 1.625em; padding-top: 47px; padding-left: 3px; line-height: 38px; letter-spacing: 0.25px; } .banner strong { font-weight: bold; } .modular a, .banner a { color: #000; transition: color 0.2s ease-in-out; } .modular a:hover, .banner a:hover { color: #47D3E5; text-decoration: none; } code { background-color: rgba(0, 0, 0, 0.06); border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.9em; margin: 0 0.25rem; padding: 0.25rem 0.325rem; } .button a { font-size: 1.375em; text-transform: uppercase; text-decoration: none; color: #000; letter-spacing: 0.125rem; margin: 0 3.875rem; color: #000; text-decoration: none; user-select: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); padding: 1.67rem 4rem; border-radius: 50px; margin: 0; letter-spacing: 0.125em; } .button a:hover { box-shadow: inset 0 0 0 1px rgba(71, 211, 229, .8); color: #47D3E5; } .button { margin-top: 5.688rem; } .story_text h1 { letter-spacing: -0.125rem; } .common_block { /* display: flex; */ } .story_img { max-width: 959px; max-height: 102vh; } img[alt="mountains"] { width: 100%; height: auto; }

Источник

Adaptive Photo Layout with Flexbox

Let’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and they will line up edge-to-edge with no gaps anywhere. The solution is not only lightweight but also quite simple. We’ll be using an unordered list of images and just 17 lines of CSS, with the heavy lifters being flexbox and object-fit .

I have two hobbies: documenting my life with photos, and figuring out interesting ways to combine CSS properties, both old and new. A couple of weeks ago, I attended XOXO and shot a ton of photos which I narrowed down to a nice little set of 39. Wanting to own my content, I’ve spent the past couple of years thinking about putting together a simple photo blog, but was never able to nail the layout I had in mind: a simple masonry layout where photos fill out rows while respecting their aspect ratio (think Photos.app on iOS, Google Photos, Flickr…). I did some research to see if there were any lightweight, non-JavaScript options, but couldn’t find anything suiting my needs. Facing some delayed flights, I started playing around with some code, limiting myself to keep things as simple as possible (because that’s my definition of fun).

• Flexbox is great for filling up rows by determining cell width based on cell content.
• This meant the images (landscape or portrait) all needed to have the same height.
• I could use object-fit: cover; to make sure the images filled the cells.

In theory, this sounded like a solid plan, and it got me a result I was about 90% happy with.

Note: 40vh seemed like the best initial approach for desktop browsers, showing two full rows of photos at a reasonable size, and hinting at more below. This also allowed more photos per line, which dramatically improves the aspect ratios.

Combined with this bit of CSS:

Note: There’s no science in using “10” here. In all my testing, this delivered the best results.

There are some considerations to keep in mind when working in different viewport orientations.

If your viewport is taller than it is wide, this approach limits the amount of photos per line thus messing up their aspect ratios. To solve this, you can make the photo rows less tall with this simple media query:

To help with small devices in landscape, increasing the height of photos helps to see them as large as possible:

Smaller Screens + Portrait

Most phones aren’t wide enough to allow flexbox to properly do its job without miniaturizing the photos, so here I opted to not try to fit multiple photos per line. Still, it’s worth setting a maximum height here so you’ll at least have a hint at the next photo in the list.

@media (max-aspect-ratio: 1/1) and (max-width: 480px) < ul < flex-direction: row; >li < height: auto; width: 100%; >img < width: 100%; max-height: 75vh; min-width: 0; >>

This approach doesn’t fully respect the aspect ratios of photos (but it’s close) and occasionally leads to some weird results, but I absolutely love the simplicity and flexibility of it all. Want to have your gallery scroll horizontally instead of vertically? A couple of tweaks will allow you to do this. Are there 1,000 photos in the gallery or just one? It’ll all look good. Unclear about aspect ratios? Flexbox is your best friend. Take another look at the demo if you haven’t yet, and let me know what you think!

Depending on the size of these photos, a page like this can grow to multiple megabytes real quick. On the blog I’m working on, I’ve added loading=»lazy» to help with this. With that attribute in place on the images, it only loads photos once you approach them while scrolling. It’s supported just in Chrome for now, but you could roll your own more supported technique.

Источник

Создание медиа-объектов

Медиа-объект — это общий термин, используемый для компонента пользовательского интерфейса, где с одной стороны есть изображение, а с другой текст. Изображение может быть слева или справа от текста — это не имеет значения. Обычно текст не обтекает изображение — он остаётся на своей стороне, а изображение на своей.

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

Это основная концепция, но, как правило, медиа-объекты должны быть достаточно гибкими. Они должны расширяться и сжиматься, чтобы их содержимое соответствовало их окружению. Кроме того, они должны подходить содержимому всех размеров, без искажения пропорций.

Итак, давайте посмотрим, как мы можем использовать флексбоксы для создания медиа-объектов.

.media < display: flex; align-items: flex-start; background: #F6F3EB; padding: 1em; border-radius: 3px; max-width: 24em; >.media-object < margin-right: 1em; >.media-body < flex: 1; >.media-heading

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

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

Мы устанавливаем flex: 1 для класса media-body , чтобы он рос и занимал оставшееся пространство. Мы не делаем этого для media-object , поскольку хотим, чтобы он соответствовал своему содержимому, и не более. Но мы устанавливаем margin-right, чтобы текст не приближался слишком близко к изображению.

Обратите внимание, что мы используем align-items: flex-start для флекс-контейнера ( media ). Это выравнивает все флекс-элементы в начале поперечной оси. В общем, они выровнены по верху нашего флекс-контейнера. Начальным значением свойства align-items является stretch , поэтому, если бы мы не установили значение, то изображение растянулось бы, чтобы соответствовать высоте текста.

Изображение справа

Мы можем перевернуть всё так, чтобы изображение было справа, а текст слева. Это делается настройкой порядка флекс-элементов.

.media < display: flex; align-items: flex-start; background: #F6F3EB; padding: 1em; border-radius: 3px; max-width: 24em; >.media-object < margin-left: 1em; order: 1; >.media-body < flex: 1; >.media-heading

Вот фрагмент, где мы меняем порядок.

Таким образом, мы использовали свойство order. Начальное значение этого свойства равно нулю, поэтому любое положительное число помещает элемент после любых элементов, для которых это свойство не задано. Любое отрицательное число помещает элемент до других элементов. Другими словами, чем ниже число у order , тем дальше оно уходит назад.

Вместо этого мы могли бы применить order: -1 к классу media-body — это бы дало тот же эффект.

Заметьте, что мы также изменили margin-right на margin-left, когда изображение стало справа.

Вложенные медиа-объекты

Когда вы создаёте медиа-объекты, то можете вкладывать их друг в друга.

.media < display: flex; align-items: flex-start; background: #F6F3EB; padding: 1em; border-radius: 3px; max-width: 24em; >.media-object < margin-right: 1em; >.media-body < flex: 1; >.media-heading

В данном случае мы просто вставили один медиа-объект внутрь media-body другого медиа-объекта.

Медиа-объекты без изображений

Медиа-объект не обязательно должен быть изображением. Это может быть видео, элемент формы или что-то ещё. Вот пример использования спецсимволов HTML для отображения иконки.

.media < display: flex; align-items: flex-start; background: #F6F3EB; padding: 1em; border-radius: 3px; max-width: 24em; >.media-object < margin-right: .4em; font-size: 3em; >.media-body < flex: 1; >.media-heading