Полноразмерные изображения с минимальным CSS

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

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

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


css full-width
person Justin Winokur    schedule 06.10.2019    source источник
comment
Совершенно нормально публиковать ответы на свои вопросы, так что уже спасибо за это. Тем не менее, на ваш вопрос по-прежнему должен отвечать любой, поэтому пишите так, как будто вам действительно нужен кто-то еще, кроме вас, чтобы ответить на него (полная информация, возможно, минимальный воспроизводимый пример и т. д.) и, кроме того, не нужно ни заголовка о том, что вы уже решили его, ни всего прошедшего времени.   -  person Kaiido    schedule 06.10.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

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

  • $pad будет дополнением тела (2em)
  • $body_width будет шириной элемента body (900px
  • $mh — дробь для установки максимальной высоты. Опять же, это личное предпочтение типа изображений, которые вам интересны. Я сделаю 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]

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

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

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

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

person Justin Winokur    schedule 06.10.2019
comment
* {border: 0; margin: 0; padding: 0;} и не забудьте object-fit: developer.mozilla.org/ en-US/docs/Web/CSS/object-fit. Просмотрите списки свойств CSS, селекторов и т. д. и других языков, с которыми вы работаете. Будьте в курсе инструментов, доступных для использования. Удачи. - person John; 06.10.2019