0

Есть такого рода код (ниже привел), в нем я модной зеленой dotted линией указал, можно сказать, всю проблему: как заставить article иметь 100% ширину помещенной в него картинки?
Лехчайшим образом можно взять из этой картинки все параметры через js и засунуть их в атрибуты блока article, но увы! Так делать нельзя, ведь если посмотрите в css, то там используются vh, ну и вообще, там много свойств, которые намекают вам, что всё должно легко ресайзится.
Имеется codepen, если надо поиграться.

body {
  margin: 0;
  padding: 0;
}

.overlay {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 153, 0.3);
}
.overlay article {
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70vh;
  margin: auto;
  text-align: center;
  outline: 1px dotted green;
}
.overlay article img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  margin: auto;
}
<div class="overlay">
  <article>
    <img src="https://unsplash.it/300/400" />
  </article>
</div>

4
  • Вам нужно, что бы article имел полную ширину картинки? А высоту?
    – Yuri
    Commented 18 янв. 2017 в 22:21
  • Yuri, так а с высотой-то нет проблем. Высота автоматичесеки высчитывается, а вот ширина этим не хвастается) Есть хак на inline-block, но он не работает с абсолютным позиционированием по всей видимости. Ну а высота ограничивается max-height: 70%, но это дизайнерская фича и к вопросу не имеет никакого отношения.
    – wokalek
    Commented 18 янв. 2017 в 22:23
  • Я не понял, вам нужно, что бы article настоящую ширину картинки? Тогда зачем вы добавили к ней position: absolute?
    – Yuri
    Commented 18 янв. 2017 в 22:25
  • @Yuri, мне не нужно чтобы артикл имел ширину такую, которая на данный момент отображается с учетом ограничения высоты по вьюпорту (70%, смотрите в свойстве). То есть либо настоящую ширину картинки, либо с этим ограничением. Короче: прям те параметры, которые у картинки и есть в отображении. А позишн абсолют (у картинки) тут ни к чему, это так - поиски решений, забыл убрать.
    – wokalek
    Commented 18 янв. 2017 в 22:27

3 ответа 3

3

body {
  margin: 0;
}

.overlay {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 153, 0.3);
  text-align: center;
}

.overlay::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.overlay article {
  display: inline-block;
  vertical-align: middle;
  outline: 1px dotted green;
}

.overlay article img {
  display: block;
  max-height: 70vh;
}
<div class="overlay"><!-- No spaces --><article>
  <img src="https://unsplash.it/1400/1500" />
</article></div>

2
  • Точно, хорошее решение, я совсем забыл про хак с псевдоэлементом) Спасибо! Вполне себе решение и ответ на вопрос. Ток вот не очень люблю этот прием, прям как отрицательные марджини, а уже ведь 2017-й год на дворе... Неужели прям вообще никак больше?
    – wokalek
    Commented 18 янв. 2017 в 22:32
  • Можно всё. См. другой ответ.
    – Qwertiy
    Commented 18 янв. 2017 в 22:38
2

body {
  margin: 0;
}

.overlay {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 153, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay article {
  outline: 1px dotted green;
}

.overlay article img {
  display: block;
  max-height: 70vh;
}
<div class="overlay">
  <article>
    <img src="https://unsplash.it/1400/1500" />
  </article>
</div>

1
  • Вот черт, полностью удовлетворяет всему это решение :D Опять о таком не подумал, потому что после работы с анимацией абсолютно позиционированных элементов прям поклялся себе, что не буду больше flex юзать. В фаерфоксе глючит. А работает как надо: в предыдущем примере, например, если ширина становилась меньше картинки, элемент совсем исчезал, в моем примере картинка уходила вправо, а с флексами всё прекрасно - по центру контейнер остается. Красота. Если бы ещё анимация не лагала и позиционирование в фаерфоксе, то было бы круто. Спасибо за ещё одно решение)
    – wokalek
    Commented 18 янв. 2017 в 22:44
1

body {
  margin: 0;
}

.overlay {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 153, 0.3);
}

.overlay article {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-height: 70vh;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content; /* IE лесом */
  outline: 1px dotted green;
}

.overlay article img {
  display: block;
  max-height: 100%;
}
<div class="overlay">
  <article>
    <img src="https://unsplash.it/1400/1500" />
  </article>
</div>

10
  • А вот такого: width: min-content, я совсем не встречал) Погуглил - на css-tricks рассказывают, правда поддержка хромает. Но вроде клево! Наверно, его и включу. А поддержку допилят, думаю, быстро, свойство гениальное. Но а флексы глючат как по мне) Спасибо.
    – wokalek
    Commented 18 янв. 2017 в 22:51
  • Префиксы покрывают всё, кроме Оперы 12 и IE/Edge. Флексы не глючат. Ответ с флексами лучше.
    – Qwertiy
    Commented 18 янв. 2017 в 22:53
  • Ну вот например, очень легкий пример, тут меню и то умудряется подглючивать. А ведь там всего лишь транзишн по флекс-гров и пара других анимаций через туггл классов. Ну наверно флексы не так уж и страшны, конечно. Просто если их использовать для статики, как раз для такого рода задачи, то да, это идеальное решение. Но если работать с анимацией, я всё же думаю, что флексы заставляют браузер отрисовывать ненужные моменты и из-за этого начинает всё лагать.
    – wokalek
    Commented 18 янв. 2017 в 23:00
  • @VostokSisters, глючит только если какую-нибудь жесть написать, типа такого. А вообще, не глючит.
    – Qwertiy
    Commented 18 янв. 2017 в 23:05
  • Тогда такой вопрос не по теме: а почему флексами мало кто пользуется из сайтов, которые рассчитаны на большое количество аудитории? Все сайты, типа вк, инстаграмм, фейсбук, ютюб, все сделаны из супов из дивов с солянкой из классов, а не из использования новомодных свойств? Дело же в производительности?
    – wokalek
    Commented 18 янв. 2017 в 23:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.