Question

我是HTML5和CSS3的初学者。如果问题非常基本，请道歉。我正在尝试开发一个响应式网站，我正在通过移动大小到桌面大小。我遇到的问题是，即使我认为我的div有足够的空间让照片完全展开，但图像并没有完全扩展，可以与网站的其余部分进行调整。这是我的html5代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/page-main.css">
    <link rel="stylesheet" href="./css/footer.css">
    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">

    <!-- fonts -->
  <title>Home Page</title>
  </head>
  <body>
    <main class="main-container">
        <section class="cover-photo-home-page-box">
          <div class="cover-photo-container">
            <img class="cover-photo" src="./img/Cover.jpg" alt="">
          </div>
          <div class="text-next-coverphoto-home">
            <h1 class="heading-home-index">Autumn is coming</h1>
            <p>
            The weather is getting colder and colder. you’d better put on some more clothes. Good news, we have some warm hoodie for you. For you guys the camping is literally made for you – warm, comfortable and casual at the same time. For you ladies, you have the choice between the Sunday hoodie or the Camper. Great no?
            </p>
          </div>
        </section>

      <section class="middle-grid-box-container-home">
        <!-- <div class="photo-banner"> -->
          <a href="./woman.html" class="middle-grid-left-box-container-home">
            <img class="middle-grid-banner-photo" src="./img/Banner-Top-Men.jpg" alt="">
          </a>
          <div class="middle-grid-right-box-container-home">
            <a href="./men.html" class="middle-grid-right-top-box-container-home">
              <img class="middle-grid-banner-photo" src="./img/Banner-Top-Men.jpg" alt="">
            </a>
            <a href="./men.html" class="middle-grid-right-bottom-box-container-home">
              <img class="middle-grid-banner-photo" src="./img/Banner-Top-Men.jpg" alt="">
            </a>
          </div>
        <!-- </div> -->
      </section>

这是我的css代码

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }

body {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  font-family: 'Josefin Sans', sans-serif;
}

.main-container{
  margin-left:50px;
  margin-right: 50px;
}

.cover-photo-home-page-box{
  display: -webkit-flex; /* For support in a series of Webkit browsers */
  display: -ms-flex; /* For support in IE 10 */
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;

}

.text-next-coverphoto-home{
  line-height: 1.6rem;
  margin-top: 5rem;
}

.cover-photo-container{
  z-index: -1;
  order:1;
}

.cover-photo{
  width: 100%;
}

.heading-home-index{
  margin-top: 0;
  font-size: 3em;
  line-height: 3rem;
}


/*css style for the middle grid*/
.middle-grid-box-container-home,.middle-grid-right-box-container-home{
  display: -webkit-flex; /* For support in a series of Webkit browsers */
  display: -ms-flex; /* For support in IE 10 */
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;
}

 .middle-grid-left-box-container-home img {
   width: 100%;
 }
 .middle-grid-right-box-container-home img{
    width: 100%;
 }

现在我不确定为什么照片没有正确排列这是结果的屏幕截图。

如果有人能提供一些提示，我们非常感激。

Answer 1

问题是图像具有不同的尺寸，因此您需要更改以下CSS。

 .middle-grid-left-box-container-home img {
   width: 100%;
   max-width:350px;
   height:auto;
 }
 .middle-grid-right-box-container-home img{
    width: 100%;
   max-width:350px;
   height:auto;
 }

这里我们将最大宽度设置为最小图像宽度的宽度，因此所有图像都具有相同的宽度。为了保留图像的比例，我设置了height:auto，以使图像保持对称。

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }

body {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  font-family: 'Josefin Sans', sans-serif;
}

.main-container{
  margin-left:50px;
  margin-right: 50px;
}

.cover-photo-home-page-box{
  display: -webkit-flex; /* For support in a series of Webkit browsers */
  display: -ms-flex; /* For support in IE 10 */
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;

}

.text-next-coverphoto-home{
  line-height: 1.6rem;
  margin-top: 5rem;
}

.cover-photo-container{
  z-index: -1;
  order:1;
}

.cover-photo{
  width: 100%;
}

.heading-home-index{
  margin-top: 0;
  font-size: 3em;
  line-height: 3rem;
}


/*css style for the middle grid*/
.middle-grid-box-container-home,.middle-grid-right-box-container-home{
  display: -webkit-flex; /* For support in a series of Webkit browsers */
  display: -ms-flex; /* For support in IE 10 */
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;
}

 .middle-grid-left-box-container-home img {
   width: 100%;
   max-width:350px;
   height:auto;
 }
 .middle-grid-right-box-container-home img{
    width: 100%;
   max-width:350px;
   height:auto;
 }

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/page-main.css">
    <link rel="stylesheet" href="./css/footer.css">
    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">

    <!-- fonts -->
  <title>Home Page</title>
  </head>
  <body>
    <main class="main-container">
        <section class="cover-photo-home-page-box">
          <div class="cover-photo-container">
            <img class="cover-photo" src="./img/Cover.jpg" alt="">
          </div>
          <div class="text-next-coverphoto-home">
            <h1 class="heading-home-index">Autumn is coming</h1>
            <p>
            The weather is getting colder and colder. you’d better put on some more clothes. Good news, we have some warm hoodie for you. For you guys the camping is literally made for you – warm, comfortable and casual at the same time. For you ladies, you have the choice between the Sunday hoodie or the Camper. Great no?
            </p>
          </div>
        </section>

      <section class="middle-grid-box-container-home">
        <!-- <div class="photo-banner"> -->
          <a href="./woman.html" class="middle-grid-left-box-container-home">
            <img class="middle-grid-banner-photo" src="http://via.placeholder.com/350x150" alt="">
          </a>
          <div class="middle-grid-right-box-container-home">
            <a href="./men.html" class="middle-grid-right-top-box-container-home">
              <img class="middle-grid-banner-photo" src="http://via.placeholder.com/550x150" alt="">
            </a>
            <a href="./men.html" class="middle-grid-right-bottom-box-container-home">
              <img class="middle-grid-banner-photo" src="http://via.placeholder.com/450x150" alt="">
            </a>
          </div>
        <!-- </div> -->
      </section>

＆＃13;

css grid flex box - 为什么我的图片无法填充整个指定的div框

1 个答案: