Question

我有以下小提琴

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

现在

我在页面中间有一个固定的位置模式，最小宽度和最小高度...适用于移动设备......一切正常......如果你调整页面大小，那就没关系了。

我需要什么

由于最小宽度和最小高度，模态保持其大小，所以我需要在屏幕较大时，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 screen and（max-width：800px）{

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

调整固定模态的大小

2 个答案: