调整固定模态

Question

我有以下fiddle

我将解释我所知道的，以及我打算实现的目标。

现在

我在页面中间有一个固定位置模态，最小宽度和最小高度...适用于移动设备...一切正常...如果您调整页面大小，一切正常很好。

我需要什么

由于最小宽度和最小高度，模态保持其大小，所以我需要当屏幕变大时，tourImage 也增加其大小。我尝试使用

width: 80%; min-width:260px;

这是为了调整图片大小，但没有用。

有什么建议吗？

Answer 1

哎呀，

我认为您需要在固定模态和图像上添加宽度，如下所示：

.tourImage{
  position: relative;
  width: 100%;
  min-width: 260px;
  min-height: 340px;
  margin: 0 auto;
  display: none;
  background: #55acee;
}
.popover{
  background:#fff;
  width: 80%;
  transform: translate(-50%, -50%);
  position: fixed;;
  top: 50% !important;
  left: 50% !important;
  padding: 0 20px;
}

https://jsfiddle.net/7q8nejo3/4/

您可以根据需要调整宽度。

Answer 2

你可以这样试试。你会得到的是图像的宽度不会溢出容器 div.

@media 屏幕和（最大宽度：800 像素）{

.tourImage{
      position: relative;
      width: 80%;
      min-width: 260px;
      min-height: 340px;
      margin: 0 auto;
      background: #55acee;
    }
    .popover{
      background:#fff;
      width: 80%;
      transform: translate(-50%, -50%);
      position: fixed;;
      top: 50% !important;
      left: 50% !important;
      padding: 0 20px;
    }
   }


 @media screen and (max-width:400px){
      .popover{
        width: auto;
      }
 }

调整固定模态

Resize fixed modal

html

css

resize