Создание наложения для изображения с горизонтальным центрированием без фиксированной ширины

У меня есть эта HTML-структура:

<div class = "container">
    <img class = "image" />
    <div class = "overlay">
       <div class = "insides">more elements here</div>
    </div>
</div>

и этот код CSS:

.container {
  position: relative;
  height: 88vh;
  margin: 0;
}

.image {
  height: 100%;
  position: absolute;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  top: 0;  
  bottom: 0;
  right: 0; 
}

.overlay {
  position: absolute;
}

Мои требования следующие:

Заставьте изображение заполнить доступное вертикальное пространство и отцентрируйте его по горизонтали. (Работает)
Сделайте наложение изображения того же размера, что и изображение - без использования абсолютного атрибута width. (Не работает - проблема)
Закрепите значки в определенных местах на изображении. (Использование процентов для атрибутов top и left ... Не уверен, что это будет так просто, как я думаю.)

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

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

javascript html css image overlay

01.04.2021 00:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Один из способов сделать это - обернуть изображение и оверлей в div и центрировать его.

.container {
    position: relative;
    height: 88vh;
    margin: 0;
    text-align: center;
}
.imagecontainer
{
    position: relative;
    display: inline-block;
    height: 100%;
}
.image {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

<div class = "container">
    <div class='imagecontainer'>
        <img class = "image" src='imageurlhere'/>
        <div class = "overlay">
           <div class = "insides">more elements here</div>
        </div>
    </div>
</div>

Таким образом, Image будет устанавливать ширину своего родителя, а также ширину Overlay.

Мерси очень понравился!

— 01.04.2021 00:31

01.04.2021 00:22