Наложение текста на центрированное изображение, которое меньше, чем содержащий его элемент

Question

У меня есть следующий случай:

1. Изображение, ширина которого меньше ширины страницы.
2. Изображение должно быть отцентрировано в родительском элементе div (который шире).
3. Текст наложения должен отображаться на изображении в одном из его углов.
4. Невозможно растянуть изображение .Изображение будет отображаться в его исходном размере.
5. Размер изображения не может быть установлен в CSS, так как этот шаблон будет использоваться для многих изображений в другом размере.

Таким образом, кодЯ придумал, это дано в https://jsfiddle.net/RoyiA/gdezys7j Или (должно быть просмотрено в полноэкранном режиме, чтобы изображение было отцентрировано):

@font-face {font-family: "MammaGamma";
src: url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.eot");
src: url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.eot?#iefix") format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.woff2") format("woff2"),
url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.woff") format("woff"),
url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.ttf") format("truetype"),
url("//db.onlinewebfonts.com/t/1d8209e6e1d626b5657d1a5b99ea9572.svg#MammaGamma") format("svg");
}

.image-container {
  	position: relative;
  	font-family: Arial;
}

.image-center{
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}

.image-text-block {
  	position: absolute;
display: block;
  	top: 100px;
  	left: 10px;
  	background-color: rgba(100, 100, 100, 0.5);
  	color: white;
  	padding-left: 10px;
  	padding-right: 10px;
}

<h2>Image Text Blocks</h2>
<p>How to place text blocks over an image:</p>

<div class="image-container">
	<img class="image-center" src="https://i.imgur.com/0s8kLb7.png" alt="Nature">
  	<div class="image-text-block">
    	<h3>Created with <span style="font-family:MammaGamma; color:rgb(239, 74, 74)">Photoshop</span></h3>
    	<p>Image: <a href="https://www.flickr.com/photos/151740882@N05/47029584231">Jane</a> by Mireille Lannoo</p>
  	</div>
</div>

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

Answer 1

Я бы предложил обернуть блок image-container внутри другого div, целью которого является его центрирование. Таким образом, блок изображения-контейнера имеет ширину изображения, и ваше абсолютное расположение поля заголовка должно работать как положено.

.image-container {
  position: relative;
  font-family: Arial;
}

.image-center {
  display: flex;
  justify-content: center;
}

.image-center img {
  display: block;
}

.image-text-block {
  position: absolute;
  display: block;
  top: 10px;
  left: 10px;
  background-color: rgba(100, 100, 100, .5);
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}

<h2>Image Text Blocks</h2>
<p>How to place text blocks over an image:</p>

<div class="image-center">
  <div class="image-container">
    <img src="https://i.imgur.com/0s8kLb7.png" alt="Nature">
    <div class="image-text-block">
      <h3>Created with <span style="font-family:MammaGamma; color:rgb(239, 74, 74)">Photoshop</span></h3>
      <p>Image: <a href="https://www.flickr.com/photos/151740882@N05/47029584231">Jane</a> by Mireille Lannoo</p>
    </div>
  </div>
</div>

Answer 2

Просто пара изменений вот так.

.image-center {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
}

Answer 3

.image-container {
  	position: relative;
  	font-family: Arial;
    width:650px;
    margin: auto;
    }

.image-center{
	margin:auto;
  width: 100%;
}

.image-text-block {
  	position: absolute;
  	top: 10px;
  	left: 10px;
  	background-color: rgba(100, 100, 100, 0.5);
  	color: white;
  	padding:0 10px;
}

<h2>Image Text Blocks</h2>
<p>How to place text blocks over an image:</p>

<div class="image-container">
	<img class="image-center" src="https://i.imgur.com/0s8kLb7.png" alt="Nature">
  	<div class="image-text-block">
    	<h3>Created with <span style="font-family:MammaGamma; color:rgb(239, 74, 74)">Photoshop</span></h3>
    	<p>Image: <a href="https://www.flickr.com/photos/151740882@N05/47029584231">Jane</a> by Mireille Lannoo</p>
  	</div>
</div>.

Ваш контейнер изображений не имеет заданной ширины и, следовательно, будет шириной экрана, если вы не установите ширину.Вы размещаете текст в верхнем левом углу контейнера, а не на изображении.