Уценка с изображениями HiDPI/Retina

Как я могу отображать изображения на дисплее HiDPI с помощью HTML, созданного из Markdown, чтобы изображения отображались в высоком разрешении. Обычно я создаю теги <img> с атрибутами srcset или соответствующим образом устанавливаю width и height для каждого изображения или использую медиа-запросы. Однако результат изображений Markdown допускает только атрибут alt. В частности, я использую библиотеку marked (я не могу это контролировать).

У меня есть полный контроль над CSS. Есть ли способ в CSS сделать все изображения хотя бы на 1/3 шире логических пикселей, чем у них есть физические пиксели по ширине? Таким образом, я мог бы потребовать, чтобы все изображения, на которые есть ссылки в Markdown, были 3x. Это так просто?

img {
  width: 33.33%;
}

Гораздо лучше было бы, чтобы браузер загружал другое изображение в зависимости от devicePixelRatio устройства.

Использование HTML не вариант. помеченный используется с флагом sanitize для экранирования любого HTML. Я надеюсь, что есть решение CSS или какой-то другой умный механизм.


css markdown pixel-ratio retina-display hidpi
person at.    schedule 20.09.2017    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Чтобы сделать это с помощью Markdown, просто используйте необработанный HTML. Состояние правил (выделено жирным шрифтом):

Markdown не является заменой HTML и даже близко к нему. Его синтаксис очень мал и соответствует только очень небольшому подмножеству тегов HTML. Идея не в том, чтобы создать синтаксис, облегчающий вставку тегов HTML. На мой взгляд, теги HTML уже легко вставлять. Идея Markdown состоит в том, чтобы упростить чтение, написание и редактирование прозы. HTML – это формат публикации; Markdown — это формат письма. Таким образом, синтаксис форматирования Markdown решает только проблемы, которые можно передать в виде обычного текста.

Для любой разметки, на которую не распространяется синтаксис Markdown, вы просто используете сам HTML. Нет необходимости предварять его или разделять, чтобы указать, что вы переключаетесь с Markdown на HTML; вы просто используете теги.

Поэтому используйте теги <img> с атрибутами srcset и/или width и height точно так же, как в HTML. Markdown пропустит их как есть.

person Waylan    schedule 20.09.2017
comment
Я должен был отметить, что HTML не разрешен (используя sanitize флаг отмеченных опций). - person at.; 20.09.2017
comment
Ну, это единственный механизм, который предоставляет Markdown. Если необработанный HTML не вариант, то это невозможно из стандартного Markdown. Думаю, вам нужно будет использовать решение CSS. Единственным исключением может быть какое-то расширение/плагин, добавляющее нестандартное поведение, но я недостаточно знаком с пометкой, чтобы знать, существует ли для него такая вещь. - person Waylan; 20.09.2017

arrow_upward
0
arrow_downward

Один из способов, которым я смог работать с изображениями HiDPI, полученными из Markdown, — это использование атрибута title. Заголовки изображений могут быть семантически значимыми и предоставлять CSS информацию для эффективного определения размера изображений с помощью селекторы атрибутов.

В качестве примера я могу создать изображение Markdown следующим образом:

![](http://images.ucode.com/logo_1200.png "Important example")

Затем я могу использовать селектор атрибутов, чтобы установить ширину от 1200 пикселей до 400 пикселей, что делает его очень четким для устройств с devicePixelRatio из 3:

img[title~="important" i][title~="example" i] {
  width: 400px;
}

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

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

person at.    schedule 21.09.2017

arrow_upward
-1
arrow_downward

Вы можете учитывать ширину устройства и соотношение пикселей устройства. Так что мы можем решить эту проблему.

/* Large Monitors devices (large desktops, 1920px and up)*/
@media only screen and (max-width: 1920px) {

  .logo {
    width: 160px;
    height: 109px;
    background-image: url("/img/1920px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo {
      width: 160px;
      height: 109px;
      background-image: url("/img/1920px/logo/logo-2x.png");
    }

  }

}

/* Extra large devic
es (large desktops, 1280px and up)*/
@media only screen and (max-width: 1280px) {

  .logo {
    width: 120px;
    height: 82px;
    background-image: url("/img/1280px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/1280px/logo/logo-2x.png");
    }

  }
}

/* Large devices (desktops, 960px and up)*/
@media only screen and (max-width: 960px) {

  .logo{
    width: 100px;
    height: 68px;
    background-image: url("/img/960px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/960px/logo/logo-2x.png");
    }

  }

}

/* Medium devices (tablets, 640px and up)*/
@media only screen and (max-width: 640px) {

  .logo{
    width: 78px;
    height: 42px;
    background-image: url("/img/640px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/640px/logo/logo-2x.png");
    }

  }
}


/* Small devices (landscape phones, 320px and up)*/
@media only screen and (max-width: 320px) {

  .logo{
    width: 78px;
    height: 42px;
    background-image: url("/img/320px/logo/logo-1x.png");
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {

    .logo{
      width: 160px;
      height: 109px;
      background-image: url("/img/320px/logo/logo-2x.png");
    }

  }
}
person sajee    schedule 20.09.2017
comment
Я не понимаю этот ответ. Вы дали кучу медиа-запросов для класса logo. Markdown не позволяет устанавливать классы для изображений, по крайней мере, я не знаю. - person at.; 20.09.2017