DIV вокруг централизованного изображения

Question

Я пытаюсь отобразить изображение, центрированное по вертикали и по горизонтали на экране (что в моем случае является модальным экраном). Изображение должно быть не более 80% и 80%. Это может быть пейзаж, квадрат или портрет.

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

Это то, что у меня есть до сих пор.

https://jsfiddle.net/Cralis/1w8d4zx5/

<div class="imageContainer"> 
    <img id="imgContainer" class="fullimage animated fadeIn" src="http://cameraflare.com/photostore/23d255d8-e259-47ee-be2d-fae68c730f6d/afda43dd-5a81-40b2-8161-d1f222689d3f.jpg"> 
    <h2> 
       <span>The one and only: 
       <span class='spacer'></span> 
       <br /> 
       <span class='spacer'></span> 
       The Hulk 
       </span> 
       </h2> 
    </div> 

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

https://css-tricks.com/text-blocks-over-image/

Как я могу получить imageContainer дел до 'объятие' изображение?

Answer 1

Не уверен, но я думаю, что вы ищете следующее:

• Установите ваш .imageContainer в display: inline-block и добавить его text-align: left
• Установить родительский контейнер изображения в text-align: center

Итак, вы получите свой центр с центром, но вы также обернете изображение с помощью границы. Посмотрите здесь:

https://jsfiddle.net/0k3wrfxt/

Answer 2

вы можете использовать CSS3 Flexbox концепцию для достижения этой цели. добавьте следующие стили к родительскому контейнеру вашего изображения

• дисплей: сгибать;

• элементы-выходы: центр;

• обоснование-содержание: центр;

и удалите margin: 100px; на вашем .imageContainer, он будет работать нормально. Я добавил фрагмент ниже.

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    
 
    } 
 
.fullimage { 
 
    vertical-align: top; 
 
    display: block; 
 
    margin: auto; 
 
    border-radius: 7px; 
 
} 
 

 
.imageContainer { 
 
    max-height: 80vh; 
 
    max-width: 80vw; 
 
    border: solid; 
 
    /*margin: auto; 
 
    margin-left:100px;*/ 
 
    position: absolute; 
 
    padding: 0; 
 
} 
 

 
h2 { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 

 
h2 span { 
 
    color: white; 
 
    font: bold 24px/45px Helvetica, Sans-Serif; 
 
    letter-spacing: -1px; 
 
    background: rgb(0, 0, 0); 
 
    /* fallback color */ 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 10px; 
 
} 
 

 
h2 span.spacer { 
 
    padding: 0 5px; 
 
}

<div class="imageContainer"> 
 
    <img id="imgContainer" class="fullimage animated fadeIn" src="http://cameraflare.com/photostore/23d255d8-e259-47ee-be2d-fae68c730f6d/afda43dd-5a81-40b2-8161-d1f222689d3f.jpg"> 
 
    <h2> 
 
       <span>The one and only: 
 
       <span class='spacer'></span> 
 
       <br /> 
 
       <span class='spacer'></span> 
 
       The Hulk 
 
       </span> 
 
       </h2> 
 
    </div>