使用模态图像

Question

我想在我的回应式网站使用模式的图像。我有我的图片的div作为背景图片。喜欢;

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

我已经检查w3schools.com：How TO - Modal Images

然而，当我使用<img>标签这种方法是非常有用的。我怎样才能用在我的图像在div的实施莫代尔图片？

我需要使用DIV作为我的网站将不能没有它适当的工作。

谢谢。

Answer 1

给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%;
}

REF：https://css-tricks.com/perfect-full-page-background-image/

Answer 2

我解决我的问题有一点点努力。我用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>

在这里，每个ID是非常重要的。请确保你让他们一样。 所以changeImage(a)功能改变图像。在我的div标签，我把它打开“image.jpg的”。

changeCaption(id)功能改变标题。如果你想没有标题，你写changeCaption("o");正如我在DIV类写道。如果你希望你的标题为“美丽的花朵”，例如，你写changeCaption("Beautiful Flowers");。

我希望我帮助别人。谢谢。

Answer 3

<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>