Переменная ширина полосы изображений - PullRequest
Новая
       10

Переменная ширина полосы изображений

0 голосов
/ 29 июня 2019

Добрый вечер,

Я пытаюсь создать «полосу» изображений на моем веб-сайте с переменной шириной (до 1024 пикселей). Вместо того, чтобы растягивать изображения, я хочу сохранить постоянную высоту и добавлять или удалять изображения на панели в зависимости от ширины сайта.

В качестве отправной точки предположим, что все изображения имеют одинаковое измерение.

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

Я бы предпочел не использовать @media запросов, если смогу.

Буду признателен за любую помощь. enter image description here

Ответы [ 3 ]

1 голос
/ 30 июня 2019

Самое простое, вы можете просто скрыть все изображения, которые не отображаются следующим образом: 

.photo-bar {
  width: 100%;
  height: 100px; /* I deliberately set the size smaller than the image height to show that it works with different image sizes. If all of the images are actually the same height then you probably want it to match the image height */
  overflow: hidden;
}

.photo-bar img {
  height: 100%;
  
  /* This is to make sure you don't introduce spaces between the pictures */
  display: block;
  float: left;
}
<div class='photo-bar'>
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
</div>

Вы, безусловно, можете придумать, используя flex-direction: row, хотя это будет более сложно получить описанное поведение (только показывая изображения, которые будут соответствовать).Если вам нужна галерея с горизонтальной полосой прокрутки, это лучший вариант. 

.photo-bar {
  display: flex;
  flex-direction: row;
  height: 100px;
  overflow: scroll;
  position: relative;
}

.photo-bar img {
  height: 100%;
}
<div class='photo-bar'>
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
</div>
0 голосов
/ 30 июня 2019

Это может быть отправное место.

Вы также хотели, чтобы ряд изображений был в центре? 

body {
    margin: 0;
    padding: 0;
}

.image-bar {
    display: flex;
    
    /* no-wrap prevents the images from soft wrapping. */
    wrap: no-wrap;
    
    /* This will hide any images that are off the page. 
       I guess it wouldn't matter too much since you can't see
       the images anyways. */
    overflow: hidden;
}
<div class="image-bar">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
</div>
0 голосов
/ 29 июня 2019

обновление: увидев ваш эскиз / макет, теперь я понимаю, что вы ищете.

Даже если вы хотите избежать использования медиазапросов, это будет лучшим решением.

Общая логика заключалась бы в определении «базового» размера ваших изображений, скажем, 100 на 100 пикселей.

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

Вы должны принять во внимание, что ширина области просмотра сильно варьируется, и у вас всегда будет частичное деление общего пространства / размера изображения.Затем вам нужно решить, что вы хотите сделать в таком случае, обычно вы определяете фиксированное количество изображений в строке и скрываете остальные.

Это более или менее то, что вам нужно?

В качестве альтернативы, как указывал cjc, вы могли бы сделать так, чтобы изображения по бокам скрывались, если им не хватало места для показа ... но у вас все равно будут частичные детали, если вы не используете flex-wrapи затем, если это произойдет, у вас будет свободное место ... так что все это возвращает нас к запросам:)

...