Использование модального изображения в <div style = "background-image: url ()">

Question

Я пытаюсь использовать модальное изображение на моем адаптивном сайте. У меня есть мои изображения в divs в качестве фонового изображения. Подобно;

<div class="someClass" style="background-image: url(image.jpg)"></div>

Я проверил w3schools.com: Как - Модальные изображения

Тем не менее, этот метод полезен, когда я использую <img> тег. Как я могу использовать Модальные Изображения, где мои изображения реализованы в div?

Мне нужно использовать div, так как мой сайт не будет работать должным образом без него.

Благодарю.

Answer 1

<i class="img img _2sxw" style="background-image: url('https\3a //static.xx.fbcdn.net/rsrc.php/v3/yd/r/g5B1Sl4zvO-.png?_nc_x\3d dNBJ7UMY9cl');background-repeat:no-repeat;background-size:100% 100%;width:332px;height:200px"></i>

Answer 2

Дай div class="someClass" высота и ширина и установить свойство CSS background-size, Это заставит изображение заполнить все пространство.

https://jsfiddle.net/ebLxg8po/

.someClass { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 50%;
  width:80%;
}

ссылка: https://css-tricks.com/perfect-full-page-background-image/

Answer 3

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

<div class="someClass" data-target="#myModal" data-toggle="modal" 
onclick='changeImage("image.jpg"); changeCaption("o");' style="background-image: url(image.jpg)"></div>

В конце страницы я добавил свой модал;

<div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                        <div class="modal-body">
                            <img src="" class="img-responsive" id="modalImg">
                            <p id="imgalt" class="caption"></p>
                        </div>
                </div>
        </div>
</div>

Итак, как вы видите, <img src> а также <p> теги пусты. Я заполняю их небольшим кодом JavaScript. Давайте посмотрим, что тоже:

<script type="text/javascript">
    function changeImage(a) {
        document.getElementById("modalImg").src = a;
    }

    function changeCaption(id) {
         var img = document.getElementById(id);
            if (id === "o") {
                document.getElementById("imgalt").innerHTML = " ";
            }
            else {
                document.getElementById("imgalt").innerHTML = id;
            }

    }
</script>

Здесь каждый идентификатор действительно важен. Убедитесь, что вы делаете их одинаковыми.
Так changeImage(a) Функция меняет изображение. В моем теге div я открыл файл image.jpg.

changeCaption(id) Функция меняет заголовок. Если вы не хотите подписи, вы пишите changeCaption("o"); как я написал в моем классе div. Если вы хотите, чтобы ваша подпись была "Красивые цветы", например, вы пишете changeCaption("Beautiful Flowers");,

Я надеюсь, что я кому-то помог. Благодарю.