CSS, чтобы всегда отображать последнюю иконку списка, обрезанную до половины

#html #css #icons #crop

#HTML #css #Значки #обрезка

Вопрос:

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

https://jsfiddle.net/1cy7kof8/91/

 .icons 
{
  background: yellow;
  width: 900px; 
  height: 76px;
}

.icons img
{
  display: inline;
  margin: 4px 12px;
}

работает нормально, когда размер окна вывода составляет 526 пикселей, тогда отображается 5 с половиной значков, но когда я изменяю размер окна, например, до 580 пикселей, тогда отображаются 6 полных значков, и пользователь понятия не имеет, что их больше. В этом случае мне нужно было бы установить поле равным «4px 9px» или «4px 16px», чтобы снова отобразить половину последнего значка.

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

Я не против добавить больше divs, если это необходимо, но он должен работать без какого-либо JavaScript.

Есть идеи?

Ответ №1:

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

 .icon-wrapper {
  width: 520px;
  overflow: auto;
  transition: all ease-in-out 1s;
}
.icon-wrapper:hover {
  width: 800px;
}

.icons {
  background: yellow;
  width: 800px;
  height: 76px;
}

.icons img {
  display: inline;
  margin: 4px 12px;
}

 <html>

  <div class="icon-wrapper">

    <div class="icons">

      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudio.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudiocode.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/cplusplus.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/fortran.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudio.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudiocode.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/cplusplus.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/fortran.svg" />
    </div>
  </div>

</html>

Развернуть фрагмент

1. Я хочу, чтобы отображались все значки. Пользователь может прокрутить вправо, чтобы увидеть больше из них, но я хотел бы отобразить последний, который все еще виден как обрезанный, как намек на то, что между остальными пробелами больше. Да, это можно было бы сделать с помощью медиа-запросов, но мне понадобится их много…