Центрированное наложение текста на изображение, которое соответствует объекту и позиционированию объекта (CSS GRID) - PullRequest
Новая
       44

Центрированное наложение текста на изображение, которое соответствует объекту и позиционированию объекта (CSS GRID)

0 голосов
/ 01 марта 2019

Мне интересно, возможно ли наложение текста по центру (заголовок) на изображение, которое соответствует объекту: Содержит;И объект-позиция: слева сверху;(т.е. не по центру)

Изображение отображается в сетке CSS.(Дисплей: Сетка;)

Пример того, что я пытаюсь сделать:

Example

*********** ANOTHER EXAMPLE: I would also like to be able to do centered captions for portrait ratio images ***********

.container {
  height: 40vw;
  width: 40vw;
  border: 1px solid black;
  display:grid;
}

img {
  max-width: 100%;
  max-height:100%;
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: left top;
}
<div class="container">
  <img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/A825/production/_103954034_gettyimages-990971906.jpg">
</div>

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

object-fit определяет, как заменяемое содержимое помещается в его контейнер.У вас нет доступа к замененному контенту с точки зрения макета и позиционирования.Чтобы добиться желаемого эффекта в сетке, можно добавить новый контейнер, задать атрибуты width / height на изображении на основе значений контейнера, а затем расположить текст относительно этого изображения, избегаяиспользование Object Fit. 

.container {
  align-items: start;
  height: 40vw;
  width: 40vw;
  border: 1px solid black;
  display:grid;
}

img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 40vw;
  max-width: 40vw;
}

.textcontainer {
  position: relative;
}

.textcontainer-x-text {
  color: limegreen;
  font-family: sans-serif;
  font-weight: bold;
  left: 50%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 50%;
  transform: translate(-50%, -50%);
}
<p>Portrait</p>
<div class="container">
  <div class="textcontainer">
    <div class="textcontainer-x-text">Example Text Which Could Be Long</div>
    <img src="http://placehold.it/150x400">
  </div>
</div>

<p>Landscape</p>
<div class="container">
  <div class="textcontainer">
    <div class="textcontainer-x-text">Example Text Which Could Be Long</div>
    <img src="http://placehold.it/300x150">
  </div>
</div>

<p>Square</p>
<div class="container">
  <div class="textcontainer">
    <div class="textcontainer-x-text">Example Text Which Could Be Long</div>
    <img src="http://placehold.it/300x300">
  </div>
</div>
0 голосов
/ 01 марта 2019

Вот одно из многих решений:

Используйте position: relative; на .container, затем position: absolute; на тексте (здесь я использовал h3), чтобы переместить его, используя -10vh из top.

HTML: 

<div class="container">
  <img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/A825/production/_103954034_gettyimages-990971906.jpg">
  <h3>LOREM IMPSUM</h3>
</div>

CSS: 

.container {
  height: 40vw;
  width: 40vw;
  border: 1px solid black;
  display:grid;
  position: relative;
}

img {
  max-width: 100%;
  max-height:100%;
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: left top;
}

h3 {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -10vw);
  top: 20vw;
}
...