使图像动态化

时间：2018-04-12 13:27:42

标签： html css twitter-bootstrap css3 twitter-bootstrap-3

我有两个问题。

  1. 我的页面底部有2张图片，当浏览器尺寸缩小时，图片不会调整大小并被切断，我试过尝试使用宽度：100％和高度：自动。我已经尝试了一个我发现的媒体查询，但似乎没有任何工作，我对HTML和CSS很新，所以可能是我的HTML代码问题，我会发布到底部供你们查看。< / p>

  2. 第二个问题是，无论页面高度如何，我都设法让页脚元素始终贴在页面底部，但是当浏览器大小缩小时，页脚是透明的，位于页面顶部图像，显然是丑陋的。我希望页脚始终与所有其他元素保持一定距离并坚持到底部。

    3. 我希望你能提供帮助，谢谢：）

    body {
  font-family: Rajdhani;
  color: white;
  width: 100%;
  height: 100%;
}


/* ============== NAV BAR =================*/

@media (max-width: 992px) {
  .navbar-collapse li a {
    color: black;
    padding: 300px;
  }
}

.nav>li>a:focus,
.nav>li>a:hover {
  background-color: transparent !important;
  color: #CCCCCC;
  border-bottom: 3px solid #FFFFFF;
  padding-bottom: 5px;
}

.dropdown-menu li,
.dropdown-menu a {
  padding: 5px 0px 5px 0px;
  margin: 0px;
  color: white;
  background-color: white;
}

.logo {
  width: 7em;
}

.navbar {
  font-family: Rajdhani;
}

.collapse .navbar-collapse {
  background: black;
}

.navbar-toggle .icon-bar {
  background-color: #fff;
  margin-top: 5.5em;
}

li a {
  color: white;
  margin-top: 2.5em;
  font-size: 1.5em;
}

#divider1 {
  padding: 0px;
  margin: 0px;
}

#divider2 {
  padding: 0px;
  margin: 0px;
}


/* ============== SLIDE 1 =================*/

#slide1 {
  background: url(dojo.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
  height: 450px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  min-height: 100%;
  position: relative;
}


/* ============== SLIDE 2 =================*/

#slide2 {
  background-color: #fff;
  color: #333333;
  height: 1150px;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 15px;
  position: relative;
  padding-bottom: 200px;
}

.headers h1 {
  color: white;
  display: block;
  margin-top: 90px;
  font-family: Rajdhani;
  text-align: center;
  font-size: 80px;
}

.headers2 {
  text-align: center;
  font-family: Rajdhani;
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  width: 85%;
}

.aboutcontent {
  font-family: Rajdhani;
  margin: 0px 100px 0px 100px;
  font-size: 20px;
  text-align: center;
}

#aboutimages {
  text-align: center;
  display: flex;
  justify-content: center;
}

.aboutimages1 {
  width: 300px;
  height: 375px;
  margin: 40px 10px 0px 0px;
}

.aboutimages2 {
  width: 300px;
  height: 375px;
  margin: 40px 0px 0px 10px;
}


/* ============== CONTACT BAR =================*/

#contact {
  position: absolute;
  font-family: Rajdhani;
  font-size: 1em;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 260px;
}

#info {
  width: 100%;
}

.logo2 {
  width: 7em;
  padding-bottom: 0.5em;
}
    <div id="slide2">
  <div class="headers2">
    <h2><strong>GOSPORT & FAREHAM'S HOME OF CHAMPIONS!</strong></h2>
    <hr>
  </div>
  <div class="aboutcontent">
    <p>CONTENT</p>
    <p>CONTENT</p>
  </div>
  <div id="aboutimages">
    <img class="aboutimages1" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
    <img class="aboutimages2" src="https://listaka.com/wp-content/uploads/2015/07/baby-boy-wearing-hat.jpg">
  </div>
  <div id="contact">
    <div id="info">
      <footer>
        <hr>
        <a href="RJAhome.html"><img class="logo2" src="#"></a><br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br>
        <a href="#"><i class="fab fa-facebook-square fa-2x"></i></a>
        <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
        <a href="#"><i class="fas fa-envelope fa-2x"></i></a>
      </footer>
    </div>
  </div>
</div>

    我为大量的代码道歉，我不太确定它是什么错误，所以认为id尝试提供足够的信息。谢谢你们:)）

1 个答案:

答案 0 :(得分：1)

由于以下原因会中断

  

家长属性 - overflow:hidden;

     

儿童属性 - width:300px;（位于px）

像素值会强制您的图像保持僵硬，隐藏的溢出不会让您的图像在容器外生长。

<强>解决方案：

让我们保持overflow:hidden;不变，但添加媒体查询 您可以尝试使用媒体查询

的变体
  1. 正如我所示，你可以一个接一个地获得两个图像
  2. 您可以从px中删除width值，并使用%值
    3. 进行更改 

    body {
  font-family: Rajdhani;
  color: white;
  /*   width: 100%; */
  height: 100%;
}


/* ============== NAV BAR =================*/

@media (max-width: 992px) {
  .navbar-collapse li a {
    color: black;
    padding: 300px;
  }
}

.nav>li>a:focus,
.nav>li>a:hover {
  background-color: transparent !important;
  color: #CCCCCC;
  border-bottom: 3px solid #FFFFFF;
  padding-bottom: 5px;
}

.dropdown-menu li,
.dropdown-menu a {
  padding: 5px 0px 5px 0px;
  margin: 0px;
  color: white;
  background-color: white;
}

.logo {
  width: 7em;
}

.navbar {
  font-family: Rajdhani;
}

.collapse .navbar-collapse {
  background: black;
}

.navbar-toggle .icon-bar {
  background-color: #fff;
  margin-top: 5.5em;
}

li a {
  color: white;
  margin-top: 2.5em;
  font-size: 1.5em;
}

#divider1 {
  padding: 0px;
  margin: 0px;
}

#divider2 {
  padding: 0px;
  margin: 0px;
}


/* ============== SLIDE 1 =================*/

#slide1 {
  background: url(dojo.jpg) 50% 0 no-repeat fixed;
  background-size: cover;
  height: 450px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  min-height: 100%;
  position: relative;
}


/* ============== SLIDE 2 =================*/

#slide2 {
  background-color: #fff;
  color: #333333;
  height: 1150px;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 15px;
  position: relative;
  padding-bottom: 200px;
}

.headers h1 {
  color: white;
  display: block;
  margin-top: 90px;
  font-family: Rajdhani;
  text-align: center;
  font-size: 80px;
}

.headers2 {
  text-align: center;
  font-family: Rajdhani;
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  width: 85%;
}

.aboutcontent {
  font-family: Rajdhani;
  margin: 0px 100px 0px 100px;
  font-size: 20px;
  text-align: center;
}

#aboutimages {
  text-align: center;
  display: flex;
  justify-content: center;
}

.aboutimages1 {
  width: 300px;
  height: 375px;
  margin: 40px 10px 0px 0px;
}

.aboutimages2 {
  width: 300px;
  height: 375px;
  margin: 40px 0px 0px 10px;
}


/* ============== CONTACT BAR =================*/

#contact {
  position: absolute;
  font-family: Rajdhani;
  font-size: 1em;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 260px;
}

#info {
  width: 100%;
}

.logo2 {
  width: 7em;
  padding-bottom: 0.5em;
}

@media screen and (max-width: 621px) {
  #aboutimages {
    flex-direction: column;
  }
  #info {
    margin-top: 60px;
  }
  .aboutimages1 {
    margin: auto;
  }
  .aboutimages2 {
    margin: auto;
  }
}
    <div id="slide2">
  <div class="headers2">
    <h2><strong>GOSPORT & FAREHAM'S HOME OF CHAMPIONS!</strong></h2>
    <hr>
  </div>
  <div class="aboutcontent">
    <p>CONTENT</p>
    <p>CONTENT</p>
  </div>
  <div id="aboutimages">
    <img class="aboutimages1" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">

    <img class="aboutimages2" src="https://listaka.com/wp-content/uploads/2015/07/baby-boy-wearing-hat.jpg">

  </div>
  <div id="contact">
    <div id="info">
      <footer>
        <hr>
        <a href="RJAhome.html"><img class="logo2" src="#"></a><br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br> CONTACT INFO <br>
        <a href="#"><i class="fab fa-facebook-square fa-2x"></i></a>
        <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
        <a href="#"><i class="fas fa-envelope fa-2x"></i></a>
      </footer>
    </div>
  </div>
</div>

相关问题
最新问题