gpt4 book ai didi

html - 高度 :100% does not work to resize my div

转载 作者:行者123 更新时间:2023-11-28 08:29:52 24 4
gpt4 key购买 nike

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

可以在此处找到该站点:

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 的最大高度,以便 slider /图像填充面板。

最后一件事,这段代码:

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

适用于宽度,所以如果我改变最大宽度/宽度,它都会改变并且工作完美。我只是想对高度做同样的事情,但是,这是行不通的。

最佳答案

在你的 CSS 中使用它:

html, body {
height: 100%
}

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

关于html - 高度 :100% does not work to resize my div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28324634/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com