在 Rails 应用程序中具有响应模式答案

【问题标题】：have a responsive modal in a rails app在 Rails 应用程序中具有响应模式
【发布时间】：2016-02-19 16:57:42
【问题描述】：

我有一个提供裁剪功能的应用。因此，单击上传时，我将打开如下所示的模式。

<div id="uploadfile" class="modal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

                <div class="modal-dialog modal-med" style="width:auto">

            <div class="modal-content modal_extra  modal_reorder modal_font" style="background-color:#59D0CA;width:auto;position:relative;height:auto;display:inline-block; width:77%">     

            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h6 style="color:black"> Oh, that's a nice image!
         </h6>
           Select area you want to use
    <div class="modal-body-step5" style="padding:17px;">           
< div id="cropimages"  >
</div>
</div>
 </div>
 </div>
  </div>

在此之后，我打开模态左侧的图像。并在图像的右侧提供相同的预览框，确保它们之间的间隙是正确的。

现在我面临的问题是，当我上传不同宽度/高度的图像时，它看起来不合适。它与当前按钮或预览框重叠。

我该如何解决这个问题？

它是一个 Rails 应用程序，所以我很难为它创建一个小提琴。

【问题讨论】：

标签： html css ruby-on-rails crop jcrop

【解决方案1】：

没有任何说明，我将不得不给出一个广泛的答案。

模态形式（通常定位在绝对）很难做出“响应式”，因为absolute 元素是out of the standard DOM flow：

(W3C) 就此而言，每个“绝对”定位元素的布局都独立于其他元素。

这意味着要保持表单正常工作，您必须为其分配特定的width 和height（即50px 等）。相对比例并不适合绝对定位的元素，尽管这是可能的。

这是您的主要问题 - 如何让您的图像与很难关联的元素成比例地显示。

简单的答案是在容器内使用动态大小的图像（其中width 或height 是容器的百分比，解析为overflow:hidden）：

.two-hundred {
    width: 400px;
    height: 300px;
    background: #ff0;
    border: 1px solid #000;
}

.container {
    overflow: hidden;
    display: block;
}
.container img { 
    display: block;
    width: 100%;
}

<div class="container two-hundred">
    <img src="http://lorempixel.com/400/200/" />
</div>

有一个good example you can use here（您必须注册并转到右上角的个人资料）：

这应该适用于模态（IE 设置图像容器，嵌入图像并将其保持在 100% 宽度/高度）。

然而，当您处理responsive 设计时，问题就出现了。如果你想制作一个模态响应式（IE根据屏幕大小改变比例），你的容器必须假设%宽度：

我们为此苦苦挣扎了一段时间，但找到了relatively simple solution：

.modal {
    position: fixed;
    top: 10%;
    left: 50%;
    right: 50%;
    width: intrinsic;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    max-width: 50%;
    transform: translateX(-50%);
}

这与真正的响应式模态非常接近。它根据内容（IE 动态宽度）填充模式，并在50% 处最大化该宽度。

这意味着您可以限制最大宽度以实现响应式界面。

您可以使用上面的代码结构 (IE .container img) 将图像放置在模态框内，然后您可以相对定义。

【讨论】：