Изображения полной ширины с минимальным CSS - PullRequest
Новая
       31

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

0 голосов
/ 06 октября 2019

Я (был) искал способ, которым мои изображения были бы во всю ширину, несмотря на заполнение тела. И я хотел, чтобы мои изображения тоже не были слишком высокими.

Сложнее, (а) все изображения живут внутри из <p> тегов, и я не могу (легко) назначать им классы и т. д. Это потому, что страницы генерируются из преобразования Markdown, и я хотел избежать необходимости применять тонну регулярных выражений (хотя я был готов при необходимости).

Требования были в основном, чтобы текст был дополнен внутритело (но не через поле p, поэтому мне не приходилось иметь дело с элементами без абзаца). И я хотел, чтобы максимальная высота составляла некоторый процент от текущей ширины. Наконец, в дополнение к попытке избежать прикосновения к HTML, я также не хотел добавлять js, если смогу помочь.

1 Ответ

1 голос
/ 06 октября 2019

Следующее моё решение. Это все еще требует некоторой переделки, так как вы можете ограничить высоту, а затем ограничить ширину квадратными изображениями, но если ничего другого, то это начало. Опять же, это может быть очень очевидно для более опытных.

Определите следующее:

  • $pad, чтобы быть дополнением тела (2em)
  • $body_width - ширина элемента тела (900px
  • $mh - это дробная часть для установки максимальной высоты. Опять же, это личное предпочтение того типа изображений, который вас интересует. Iв этом примере мы сделаем 0.9. 
body {
  margin: 1em auto auto;
  max-width: 900px; /* $body_width */
  padding: 0.1em 2em 2em; /* $pad $pad */
}

video,img{
    border: 0;
    max-width: calc(100% + 4em); /* + 2*$pad */
    max-height: 810px; /* $mh * $body_width 
    display: block;

    /* From [1] */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block;
}

[ссылка 1]

Но я также хотел работать с высокими экранами с шириной менееmax (т. е. мобильный). 

@media only screen and (max-width : 900px) { /* $mh*$body_width */
   img,video {
        max-height: 100vw;
    }
}

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

Надеюсь, это поможет кому-то вбудущее. Это могло бы спасти меня день!

...