个人中心
gpt4 book ai didi

javascript - 获取 HTML 文档的宽度以随浏览器窗口调整大小

转载 作者：太空宇宙 更新时间：2023-11-04 12:28:13 25 4
gpt4 key购买 nike

我是 web 开发的新手，目前正在为一个 friend 建立一个网站，该网站正在模仿这个网站:http://fulton-demo.squarespace.com/

虽然我已将大部分元素放入代码和样式中，但我无法弄清楚如何让图像和内容填充 100% 的宽度并在调整浏览器窗口大小时调整大小。例如，以我提供的链接上的第一张图片为例......我希望它看起来像这样，意思是两边都没有任何边距并填充浏览器窗口......我可以让它做到这一点，但它永远不会显示 100% 的图像，当我调整窗口大小时，没有任何移动。那有意义吗？

我知道这可能是一个非常基本的问题，但我希望能对此有所了解。如有必要，我可以发布任何和所有代码。提前谢谢大家!

编辑:这是我的代码:

HTML:

<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<meta charset="utf-8">
</head>
<body>
<main id="mainContent" role="main">
<article role="article">
    <section>
        <header>
            <div class="container">
                <div class="single-item-rtl" dir="rtl">
                    <div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
                    <div><img src="img/6.jpg"height="600px" width="1400px" align= center/></div>
                    <div><img src="img/6.JPG" height="600px" width="1400px" align= center/></div>
                    <div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
                </div>
                <div id=logo><img src="img/SJ_WHT.png" height="170px" width="220x" align=center</div>
                <div id=text-top-carousel>
                    <h1>a better way to book creative spaces</h1>
                </div>
            </div>
        </header>
    </section>
    <section id="info">
        <div class="info">
            <div class="icon"></div>
            <h2>unique spaces <br> that inspire</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et                       dolore magna aliqua</p>
        </div>
        <div class="info">
            <div class="icon"></div>
            <h2>hassle free <br> booking</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et                        dolore magna aliqua</p>
        </div>
        <div class="info">
            <div class="icon"></div>
            <h2>share your <br>creative space</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et                        dolore magna aliqua</p>
        </div>
        <div class="motto">
            <h1>unleash your creativity</h1>
            <p>We focus on your artistic expression at Studio Junkey. We believe that your creative process is                              limited when the necessary resources are not available to execute your vision. <br></nr> We want to                          ensure that you find the studio space that has the tools you need to express yourself and your vision</p>
        </div>
    </section>
    <section id="contactForm">
        <div class="form">
            <h3>Want to list a studio space?</h3>
            <p>We are looking for more studios. 
               Send us your information so we can connect.</p>
        </div>
    </section>
    <footer role="footer">
    </footer>
</article>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">      </script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.single-item-rtl').slick({
        rtl: true,
        autoplay: true,
        autoplaySpeed: 3000,
    });
});
</script>
</body>
</html>

CSS:

@font-face {
font-family: "Brandon Grotesque";
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf") format("opentype");
}

html, body {
height: 100%;
width: 100%;;
padding:0;
margin: 0;
}

body {
font-family:"Brandon Grotesque";
}

#mainContent {
background: white;
width:1500px;
}

.container {
width: 100%;
max-width: 1400px;
height:600px;
text-align:center;
margin: 0 auto;
}

#logo {
position:relative;
top:-595px;
left:0em;
}

#text-top-carousel h1 {
position:relative;
top:-15px;
left:0em;  
color:white;
font-size:55px;
padding: 10px;
}

#info {
margin: 0px;
clear:both;
}

.info {
width:466px;
height:400;
padding:10px;
background:white;
text-align: center;
color:#333333;
margin: 0px;
float:left;
clear: none;
}

.info.icon {
background:black;
border:1px solid white;
width:100px;
height:100px;
padding:10px;
margin-bottom: 25px;
}


.info h2 {
padding:300px 48px 10px 48px;
font-size: 45px;
margin-bottom: 0px;
margin-top: 0px;
line-height: 1em;
}

.info p {
padding:15px 50px 45px 50px;
margin: 0px;
font-size: 20px;
}

.motto {
background-image:url("img/6.jpg");
text-align: center;
color: white;
clear: both;
width:1400px;
margin:0 auto;
margin-bottom:0px;
height: 600px;
}

.motto h1 {
font-size: 60px;
padding-top: 90px;
margin-bottom: 20px;
}

.motto p {
font-size: 30px;
padding: 15px 100px 90px 100px;
}  

#contactForm {
background: #EDEFED;
margin-top:0px;
width: 1400px;
height: 600px;
margin: 0 auto;
clear: both;
}

.form {
text-align: center;
margin: 0;
width:50%;
height:500px;
color:#333333;
clear:both;
}

.form h3 {
margin: 0;
font-size: 40px;
padding: 115px 185px 50px 185px;
}

编辑 2:感谢大家迄今为止提供的所有帮助!....对于那些在评论中跟进的人，我现在遇到的问题可以通过 this screenshot 显示。 .图像轮播似乎完全填满了左侧，但右侧仍然根本没有被填满，当我向右滚动时，img 轮播的右边缘和浏览器窗口之间仍有一些空间。

最佳答案

尝试将它添加到您的 CSS 中..

.single-item-rtl img {
  width: 100%;
  height: auto;
  max-height: 600px;
  margin: auto;
}

同时从图像标签中删除 height width 和 align 否则它们将覆盖 CSS。

Slick 尝试在 slider 的左侧和右侧添加箭头，这是导致问题的原因。由于我们占据了 100% 的屏幕，他们无处可去。

$('.single-item-rtl').slick({
  rtl: true,
  arrows: false
});

编辑:

从 #mainContent 中移除宽度，使 .container 占据 100% 的屏幕。

关于javascript - 获取 HTML 文档的宽度以随浏览器窗口调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27864533/

25 4 0
文章推荐： Jquery sticky nav 在滚动时添加背景色
文章推荐： c++ - 使用 Autoconf 处理已弃用的包含
文章推荐： c++ - 代码覆盖率中编译器生成的代码
文章推荐： Java Spring有一种方法可以扩展@Scheduled来读取文件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com