使用百分比宽度!!!!

Question

我是网络开发的新手，目前正在为一位朋友建立一个网站，该网站正在建模之后：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轮播的右边缘和浏览器窗口之间仍然有一些空间。

Answer 1

尝试将此添加到您的CSS ..

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

同时从图片代码中移除height width和align，否则他们将覆盖CSS。

光滑试图在滑块的左侧和右侧添加箭头，这是造成问题的原因。由于我们占据了100％的屏幕，因此无处可去。

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

修改：

从#mainContent移除宽度以使.container占据屏幕的100％。

Answer 2

将您的内容封装在另一个元素中是有帮助的。

注意您必须将脚本工作所需的封闭元素与用于提升布局的元素分开。

此外，我的解决方案暗示您将能够以百分比指定图像宽度。您还可以添加最大和最小属性。

.outer {
  width: 5cm; // arbitrary
}

.full-width {
  width: 100%;
}

.full-width img {
  width: 15%;
  max-width: 2cm;
  min-width: 5mm;
}

<div class="outer">
  <div class="full-width">
    <img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"/>
  </div>
</div>

Answer 3

使用百分比宽度!!!!

像这样简单的事情可以做到：

.myImageClass{
  width: 50%;
  /*by not setting height, it will auto scale*/
}

样本：

html,body{
  margin:0;
  padding:0;
}

.myFullImg{
width:100%;
}

.myHalfImage{
width:50%;  
}

<img class="myFullImg" src="http://placekitten.com/g/200/200" alt=""/>

<img class="myHalfImage" src="http://placekitten.com/g/200/400" alt=""/>

通过浏览器窗口调整HTML文档的宽度以调整大小

3 个答案:

使用百分比宽度!!!!

样本：