Сделайте элемент той же ширины, что и изображение с динамическим размером?

У меня есть отзывчивый макет слайд-шоу с надписями под каждым изображением.

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

Fiddle

#big_container {
  display:block;
	position:relative;
	width:100%;
	padding-bottom:40%;
	white-space:nowrap;
	overflow-x:scroll;
	overflow-y:hidden;
}
    
#big_container>div {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}

.little_container {
	display:inline-block;
	height:100%;
	width:100%;
	text-align:center;
}

#big_container figure {
  display:inline-block;
	height:100%;
	margin:0;
}

figure img {
	max-height:calc(100% - 40px); /* subtract height of caption */
}

figcaption {
	display:block;
	width:100%;
	text-align:left;
	box-sizing:border-box;
	margin:0;
	padding:10px;
	line-height:20px;
	background-color:#ddd;
}

<div id="big_container">
  <div>

  <div class="little_container">
      <figure>
        <img src="http://placekitten.com/500/440">
        <figcaption>
          have a kitty!!1
        </figcaption>
      </figure>
  </div>
  
  <div class="little_container">
      <figure>
        <img src="http://placekitten.com/450/400">
        <figcaption>
          moar kitty!
        </figcaption>
      </figure>
  </div>
  
  <div class="little_container">
      <figure>
        <img src="http://placekitten.com/300/440">
        <figcaption>
          too many kitty..
        </figcaption>
      </figure>
  </div>
  
  </div>
</div>

Ответы

Ответ 1

Обновление

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

Это лучшее, что я смог придумать.

Скриншот демо 1 (фиксированная высота для текста, изображение полностью видно)
Fiddle demo 2 (полупрозрачный масштабируемый текст поверх изображения с анимацией)

Трюк, который я использовал главным образом, имеет скрытый img, чтобы компенсировать пробел, а затем background-image для масштабирования до максимальной ширины/высоты с сохраненным соотношением.

Я добавил встроенный стиль background-image для удобства, поэтому контент можно обрабатывать внутри html.

Чтобы сделать его идеальным, требуется script, который вычисляет содержание заголовка и корректирует уменьшение/высоту изображения/заголовка.

Демо-версия 1

html, body {
  margin: 0;
  white-space: nowrap;
  overflow-y: hidden;
}
.container {
  display: inline-block;
  white-space: normal;
  width: 100%;
}
.wrap {
  margin: 0 auto;
  display: table;
}
.image {
  display: table-cell;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain; 
}
.image img {
  visibility: hidden;
  max-width: 100vw;
  min-width: 100%;
  height: calc(100vh - 80px);
}
.caption {
  display: table-caption;
  caption-side: bottom;
  height: 40px;
  line-height: 22px;
  padding: 8px;
  background-color: #ddd;
  overflow: hidden;
}
.right {
  text-align: right; 
}

<div class="container">
  <div class="wrap">
    <div class="image" style="background-image: url('http://placekitten.com/450/300')">
      <img src="http://placekitten.com/450/300">
    </div>
    <div class="caption right">
      moar kitty!
      moar kitty!
      moar kitty!
    </div>
  </div>
</div>

<div class="container">
  <div class="wrap">
    <div class="image" style="background-image: url('http://placekitten.com/500/440')">
      <img src="http://placekitten.com/500/440">
    </div>
    <div class="caption">
      have a kitty!!1
      have a kitty!!1
      have a kitty!!1
      have a kitty!!1
      have a kitty!!1
      have a kitty!!1
      have a kitty!!1
    </div>
  </div>
</div>

<div class="container">
  <div class="wrap">
    <div class="image" style="background-image: url('http://placekitten.com/300/440')">
      <img src="http://placekitten.com/300/440">
    </div>
    <div class="caption">
      too many kitty..
      too many kitty..
      too many kitty..
    </div>
  </div>
</div>

Ответ 2

Попробуйте utitlizing border свойство

#big_container {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 40%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
#big_container>div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.little_container {
  display: inline-block;
  height: 100%;
  width: 100%;
  text-align: center;
}
#big_container figure {
  display: block;
  height: 100%;
  margin: 0;
}
/* 
     set `border` to `45px` as background for `figacption`
     set `border-left`, `border-right`, `border-top` to `0px`  
*/
img {
  max-height: calc(100% - 40px);
  border: 45px solid #ddd;
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
}
/*
     set `figcaption` elements
     set `top` to `-50px` to center `content`
     in vertical middle of `border`,
     set `width` to `calc(100% / 3)` : number of `figure` elements
     set `left` to `calc(100% / 3)` : position `content` at 
     horizontal center of `:after` , `border`
*/
figcaption {
  top: -50px;
  display: block;
  position: relative;
  background-color: transparent;
  padding: 10px;
  line-height: 20px;
  box-sizing: border-box;
  width: calc(100% / 3);
  left: calc(100% / 3);
}

<div id="big_container">
  <div>
    <div class="little_container">
      <figure">
        <img src="http://placekitten.com/500/440" />
        <figcaption>have a kitty!!1</figcaption>
      </figure>
    </div>

    <div class="little_container">
      <figure>
        <img src="http://placekitten.com/450/400" />
        <figcaption>moar kitty!</figcaption>
      </figure>
    </div>

    <div class="little_container">
      <figure>
        <img src="http://placekitten.com/300/440" />
        <figcaption>too many kitty..</figcaption>
      </figure>
    </div>

  </div>
</div>

Ответ 3

В этом fiddle я получил желаемый эффект, используя разные правила display, а также вычисляя с помощью vh единица. Я удалил лишнюю разметку и CSS, но это должно быть хорошей отправной точкой, которую вы можете использовать и использовать.

код:

#big_container {
  white-space: nowrap;
}
.little_container {
  display: inline-block;
  width: 100%;
}
figure {
  display: table;
  margin: 0 auto;
}
img {
  height: calc(100vh - 40px);
}
figcaption {
  display: table-caption;
  caption-side: bottom;
  background-color: #ddd;
  padding: 10px;
  line-height: 20px;
}

<div id="big_container">

  <div class="little_container">
    <figure>
      <img src="http://placekitten.com/500/440">
      <figcaption>
        have a kitty!!1
      </figcaption>
    </figure>
  </div>

  <div class="little_container">
    <figure>
      <img src="http://placekitten.com/450/400">
      <figcaption>
        moar kitty!
      </figcaption>
    </figure>
  </div>

  <div class="little_container">
    <figure>
      <img src="http://placekitten.com/300/440">
      <figcaption>
        too many kitty..
      </figcaption>
    </figure>
  </div>

</div>

Ответ 4

Там очень мало известно свойство CSS, которое сделано для того, что вам нужно: min-content. Что это значит, это:

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

Прочтите эту статью: Дизайн изнутри с минимальным содержанием CSS

Есть одна вещь, о которой я не сумасшедший, это префиксы:

width: -moz-min-content;
width: -webkit-min-content;
width: min-content;

Я добавил несколько сбрасываний и прокомментировал, какие стили:

Дополнительно
Рекомендуется
Обязательно

Важный CSS

  figure {
     height: 100%;
     width: -moz-min-content;
     /* REQUIRED */
     width: -webkit-min-content;
     /* REQUIRED */
     width: min-content;
     /* REQUIRED */
  }

DEMO: https://plnkr.co/edit/6e1hYkK6lB2KVS3uvQy2?p=preview

БОНУС: https://plnkr.co/edit/gahMFQScxQtkweo1G2jD?p=preview

Я сделал надписи длиннее и добавил следующий CSS, чтобы показать, как вы можете обернуть свои подписи, а не прорывать или расширять figcaption.

Бонус CSS

figcaption * {
  white-space: pre-wrap;
  /* RECOMMENDED */
}

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

LGSon фактически расширит изображение и figcaption, легко исправленные с моим решением, которое я предполагаю.
guest271314 расширяет переполнение текста, я не уверен, что исправить это, поскольку это не контейнер.
Райан Литте расширяет figcaption, я считаю, что мое решение, возможно, также исправило это.

Ответ 5

Это похоже на хорошую совместимость с flexbox. Они работают во всех современных браузерах (http://caniuse.com/#feat=flexbox) и в IE 10/11 с некоторым специальным CSS, как указано ниже.

Fiddle (по какой-то причине титры растягиваются в IE на Fiddle, но он работает в браузере.)

#big_container {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding-bottom: 40px;
  display: flex;
  flex-flow: horizontal;
  align-items: flex-start;
  justify-items: space-around;
  flex-wrap: no-wrap;

  /* For IE 10, 11 */
  display: -ms-flexbox;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
}

.little_container {
  display:inline-block;
  height:100%;
  min-width: 100vw;
  text-align:center;
  display: flex;
  flex-flow: vertical;
  align-items: center;
  justify-content:center;
  flex-direction: column;

  /* For IE 10, 11 */
  display: -ms-flexbox;
  -ms-flex-wrap: nowrap;
  -ms-flex-direction: column;
  -ms-flex-pack: start;
  -ms-flex-align: center;
}


figure {
  width: -moz-min-content;
  width: -webkit-min-content;
  position: relative;
  text-align:center;
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
  align-items: stretch;
  justify-content:center;
  margin:auto;

  /* For IE 10, 11 */
  display: -ms-flexbox;
  -ms-flex-direction: row;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  -ms-flex-line-pack: center;
}

figure img {

  display:block;
  text-align:left;
  box-sizing: border-box;
  margin:0;
  max-height:calc(100% - 40px); /* subtract height of caption */
  -ms-flex: 0 0 calc(100%-40);
  display: block;

}

figcaption {
  display:block;
  text-align:left;
  box-sizing: border-box;
  margin:0;
  padding:10px;
  line-height:20px;
  background-color:#ddd;
  -ms-flex: 1 1 60%;
  max-width: 100%;

}

Я вынул дополнительный <div> внутри #big_container, который завернул меньшие элементы, потому что это не казалось необходимым.

<div id="big_container">

  <div class="little_container">
      <figure>
        <img src="http://placekitten.com/500/440">
        <figcaption>
          I has kitty!!
        </figcaption>
      </figure>
  </div>

  <div class="little_container">
      <figure>
        <img src="http://placekitten.com/450/400">
        <figcaption>
          moar kitty!
        </figcaption>
      </figure>
  </div>

  <div class="little_container">
      <figure>
        <img src="http://placekitten.com/300/440">
        <figcaption>
          I has too many kitty. but I still need moar. Oh! No!!!!! I cannot get enuf!
        </figcaption>
      </figure>
  </div>
</div>

Кроме того, если вы еще не знаете о них, загляните в единицы просмотра CSS vw и vh. http://caniuse.com/#feat=viewport-units