Question

我无法使弹出式图像响应我试图解决它好几个小时但无济于事任何人都可以在我的代码中发现任何问题吗？

请检查pastebin或jsfiddle以获取完整代码

#popup-box 
{
      display:none;
      position:absolute;
      //border:solid 1px #f5f5f5;
      //background:#fff;
      //box-shadow:0 0 10px #666;
      left:0;
      top:0;
      bottom:0;
      right:0;
      margin:auto;

      width: 600px;
      height: 600px;          
}

#popup-image
{
    width:100%; 
    height:auto;
}

Answer 1

首先，jsfiddle带有不同的编辑＆＃34;对于css，html和js。请不要将所有内容放在html视图中（请参阅下面的小提琴中的示例）。

对于您的问题，您使用#popup-box和width属性对height的大小进行了硬编码，这就是它无法适应的原因。一个简单的解决方法是使用max-width和max-height代替：

#popup-box {
  /* ... */
  max-width: 600px;
  max-height: 600px;
}

有关完整示例，请参阅this fiddle。

作为旁注：使网站响应是一项很多工作。希望很多css框架可以为你解决这个问题：bootstrap，semantic-ui，材料等等。如果您正在创建一个生产站点，我建议您切换到其中一个而不是重新发明轮子。

如何使我从imgur获取的弹出图像响应？

1 个答案: