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

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

Answer 2

我稍微努力解决了我的问题。我用javascript来解决它。我还在我的图片上添加了标题。我像这样编辑了div类：

echo $form->field($model, 'subcat')->widget(DepDrop::classname(), [
   'options'=>['id'=>'subcat-id'],
   'pluginOptions'=>[
       'depends'=>['cat-id'],       // id of first input
       'placeholder'=>'Select...',
       'url'=>Url::to(['/site/subcat'])   //url to fetch data
   ]
]);

在页面的最后，我添加了我的模态;

<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>标记为空。我用一些javascript代码填写这些。让我们也看一下：

<p>

在这里，每个ID都非常重要。确保你使它们相同。
因此<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>函数会更改图像。在我的div标签中，我打开了＆＃34; image.jpg＆＃34;。

changeImage(a)功能会更改标题。如果你不需要标题，你可以在我的div类中写下changeCaption(id)。如果你希望你的标题是＆＃34; Beautiful Flowers＆＃34;，你可以写changeCaption("o");。

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

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>

在<div style =“background-image：url（）”>中使用模态图像

3 个答案: