лучше всего подходит IMG с надписью в элемент - PullRequest
Новая
       38

лучше всего подходит IMG с надписью в элемент

0 голосов
/ 05 марта 2020

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

.container {
  position: relative;
  width: 80%;
  height: 48vw;
  /* 4:3 */
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.img-wrap {
  background-color: #efe;
}

img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
}

.caption {
  position: absolute;
  bottom: 0;
  color: #fff;
  background-color: rgba(153, 153, 153, 0.541)
}
<div class="container">
  <div class="img-wrap">
    <img src="https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-full-aesthetic-aurora-night-sky-background-skystarry-skystarnight-viewbackgroundstar-image_87582.jpg" height="1600px">
    <div class="caption">Caption Content</div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 05 марта 2020

Обновите ваш код, как показано ниже: 

.container {
  width: 80%;
  height: 48vw;
  /* 4:3 */
  margin: 5px auto;
  text-align: center;
}

.img-wrap {
  background-color: #efe;
  height: 100%;
  display: inline-block;
  position: relative;
}

img {
  max-width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /*or cover if you want to cover all the area*/
  object-position: bottom;
}

.caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  background-color: rgba(153, 153, 153, 0.541)
}
<div class="container">
  <div class="img-wrap">
    <img src="https://i.picsum.photos/id/10/400/600.jpg">
    <div class="caption">Caption Content</div>
  </div>
</div>

<div class="container">
  <div class="img-wrap">
    <img src="https://i.picsum.photos/id/10/600/300.jpg">
    <div class="caption">Caption Content</div>
  </div>
</div>
0 голосов
/ 05 марта 2020

не position absolute изображение,

также, если заголовок является братом изображения,

установите размер родительского элемента и установите изображение как 100%, если ширина и высота родительского элемента

тогда вы можете просто использовать text-align: center на заголовке, чтобы отцентрировать его.

edit:

  • сохранить существующий стиль заголовка для позиционирования

скрипка: https://jsfiddle.net/hellooutlook/6ep4Lofz/4/

...