Question

这是我之前的问题的结果。我知道我需要为页面中心的图像设置一个特定的百分比，这样当屏幕尺寸增大/减小时，图像与此成比例。基本上，我需要在我的网站中心的图像是'面板'的大小，并完全适合该面板，以便没有滚动。

该网站可在此处找到：

https://mimi-fasi.myshopify.com/

我确信这是相当基本的东西，但我无法让它发挥作用。

<div id="content">
 <div class="flexslider type-header scaled-text-base">
  <ul class="slides">
   <li class="slide slide-1 flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
  <a href="/collections/all">
  <img src="//cdn.shopify.com/s/files/1/0727/2709/t/2/assets/slide_1.jpg?155" alt="Slide 1" draggable="false">

  <div class="overlay-text posx-left posy-bottom"> 
    <div class="inner">

      <h1 class="text-1"><span class="scaled-text" style="font-size: 5.83333333333333%;">Welcome to</span></h1>
      <h2 class="text-2"><span class="scaled-text" style="font-size: 5.83333333333333%;">Masonry for Shopify</span></h2>

    </div>
  </div>

  </a>
    </li>
  </ul>
</div>

因此，＃content实际上将包含所有需要可滚动的产品（在目录屏幕上），因此无法修复#content。

CSS：

#content {
max-width: 940px;
transition: padding 250ms;
overflow: hidden;
position: absolute;
left: 260px;
top: 100px;
}

.flexslider {
position: relative;
zoom: 1;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

.flexslider .slides {
overflow: hidden;
zoom: 1;
margin: 0;
}
.slides, .flex-control-nav, .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}

只是为了澄清，当屏幕尺寸发生变化时，图像会调整大小，这正是我想要的。但是，我想根据屏幕的大小设置div的最大高度，以便滑块/图像填充面板。

最后一件事，这段代码：

.flexslider .slides img {
max-width: 100%;
display: block;
margin: 0 auto;
width: 100%;
}

宽度适用，所以如果我更改最大宽度/宽度，这一切都会改变并且工作完美。我只是试图用高度做同样的事情，但是，这不起作用。

Answer 1

在CSS中使用它：

html, body {
 height: 100%
}

您还必须设置<div>的每个容器的高度。

身高：100％无法调整我的div

1 个答案: