Question

当我尝试调整屏幕大小时，图像旁边的列表超出了边框，页面底部的最后一张图像也超出了边框，我如何使其具有响应性，因此可以在屏幕较小或中等的情况下显示图像，这是带有css的html页面的代码

h1 {
  text-align: center;
}

ul {
  list-style: none;
}

.flexcontainer {
  display: flex;
  align-items: center;
}

.container {
  padding-top: 1%;
  padding-bottom: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Employee's Page</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
</head>

<body>

    <h1>Ahmed Haiba</h1>

    <div class="container" style="border:1px solid #000000;">
        <div class="flexcontainer">
            <div>
                <img src="http://placehold.it/350x250">
            </div>
            <div>
                <ul>
                    <li>
                        <h3>Full name: Ahmed Haiba</h3>
                    </li>
                    <li>
                        <h3>Gender: Male</h3>
                    </li>
                    <li>
                        <h3>Phone number: +9980989798</h3>
                    </li>
                    <li>
                        <h3>Company: AST</h3>
                    </li>
                    <li>
                        <h3>Address: 661 Terrace Place, Elliott, Ohio, 9927</h3>
                    </li>
                </ul>
            </div>
        </div>

        <div>
            <h3>About employee:</h3>
            <p>Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.</p>
        </div>

        <div>
            <h3>Employee was registered in the system: 2014-12-10T07:18:10 +02:00</h3>
        </div>

        <div>
          <img src="http://placehold.it/500x250">
        </div>
    </div>
</body>
</html>

如果您尝试调整屏幕大小，您会注意到只有列表超出了边框，底部的最后一张图像超出了边框，您能帮我解决这个问题吗？我希望列表在屏幕调整大小时降到图像

Answer 1

首先，您需要将max-width: 100%添加到img选择器中。这样可以防止所有图像移出其各自的容器。

这也解决了文本超出容器的问题，但会导致顶部图像在窄宽度时变得很小。为解决此问题，我还建议添加一个媒体查询（例如，768px），该查询将从display: flex中删除.flexcontainer。我还建议将其text-align: center添加到包含两个图像的两个<div>元素中，以使其水平居中。我为他们提供了.image类，以使其变得更容易。

这可以在下面看到：

h1 {
  text-align: center;
}

ul {
  list-style: none;
}

.flexcontainer {
  display: flex;
  align-items: center;
}

.container {
  padding-top: 1%;
  padding-bottom: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
}

img {
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  .flexcontainer {
    display: block;
  }
  .image {
    text-align: center;
  }
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Employee's Page</title>
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>

  <h1>Ahmed Haiba</h1>

  <div class="container" style="border:1px solid #000000;">
    <div class="flexcontainer">
      <div class="image">
        <img src="http://placehold.it/350x250">
      </div>
      <div>
        <ul>
          <li>
            <h3>Full name: Ahmed Haiba</h3>
          </li>
          <li>
            <h3>Gender: Male</h3>
          </li>
          <li>
            <h3>Phone number: +9980989798</h3>
          </li>
          <li>
            <h3>Company: AST</h3>
          </li>
          <li>
            <h3>Address: 661 Terrace Place, Elliott, Ohio, 9927</h3>
          </li>
        </ul>
      </div>
    </div>

    <div>
      <h3>About employee:</h3>
      <p>Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est
        anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.</p>
    </div>

    <div>
      <h3>Employee was registered in the system: 2014-12-10T07:18:10 +02:00</h3>
    </div>

    <div class="image">
      <img src="http://placehold.it/500x250">
    </div>
  </div>
</body>

</html>

Answer 2

您应该使用这种媒体查询，并在.flexcontainer至display: block;之间显示。

尝试：https://jsfiddle.net/o762ct48/

@media screen  and (max-width: 767px){
    .flexcontainer {
        display: block;
        align-items: center;
    }
}

Answer 3

如果要使页面具有响应性，还应该尝试使页面中的图像响应于视口大小。

在大宽度显示器中看起来不错的图像在小宽度显示器中可能看起来不好，反之亦然。

此链接将帮助您学习和了解如何使图像具有响应性：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

https://www.w3schools.com/tags/att_source_srcset.asp

如何使此页面响应

3 个答案: