css 我怎样才能防止图像从我的身体容器中爆发出来？

bqucvtff 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(141)

当我在article元素中插入一个img时，它使我的body不再是浏览器高度的100%。
没有图像，身体缩放很好，一直到屏幕底部。但是在添加图像时，它不会将身体背景向下推。我做错了什么？如果需要更多的信息，让我知道。
Picture of Issue

/* HTML */

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Dealated</title>
        <meta name="description" content="Personal website of Jessica Griffin">
        <link rel="stylesheet" href="main.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> 
        
        <style>
 
        </style>
    </head>
    <body>
        <header>
            <h1> Dealated</h1>         
        </header>
        <nav>
          <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="design.html">Design</a></li>
              <li><a href="writing.html">Writing</a></li>
              <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
        <main>
            <article>
                <img src="images/me.jpg" align="right">
                <h2>Hello</h2>
                This website is a work in progress. Sorry for the mess!
                <br>-Jessica
            </article>
        </main>
        <footer>
        All content is &copy; Jessica Griffin as of 2023. 
        </footer>
    </body>
</html>

/* CSS */

html {
    background: #7f4160;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

body {
    background: #424160;
    color: #000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 800px;
    min-width: 800px;
    min-height: 100%;
    max-height: 100%;
    padding: 2em 2em 4em;
    border-left: 3px solid #573444;
    border-right: 3px solid #573444;
}

main {
    padding: 20px;
    min-height: 100%;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #424160;
    color: white;
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3;
}

h1 {
    text-align: center;
    font-family: 'Pacifico', cursive;
    font-size: 100px;
    color: #c66d99;
    margin-bottom: 20px;
    margin-top: 10px;
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: #7f4160;  
}

h2 {
    margin-top: 1.3em;
}

b, strong {
    font-weight: 600;
}

img {
    background: transparent;
    border: 10px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding:0;
    display: inline-block;
    max-width: 95%;
}

/*  Navigation */

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #7f4160;
    text-align: center;
    
}

nav li {
    display: inline;
    float: none;
}

nav li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav li a:hover {
    background-color: #c66d99;
    color: white;
}

css

来源：https://stackoverflow.com/questions/76518011/how-can-i-keep-an-image-from-breaking-out-of-my-body-container

2条答案

按热度按时间

fruv7luv1#

您可以尝试对元素应用“clearfix”解决方案，以确保它正确地包含其浮动子元素。“clearfix”是CSS中用于确保元素正确包含其浮动子元素的技术。当一个元素包含浮动元素时，它有时会折叠，不能扩展到其浮动内容的整个高度。
您可以阅读更多here。
下面是如何修改代码的示例：

<body>
  <main>
    <article class="clearfix">
      <img src="https://www.lawrenceprospera.org/images/quintana/Page_Under_Construction.jpg" width="600px" align="right">
      <h2>Hello</h2>
      This website is a work in progress. Sorry for the mess!
    </article>
  </main>
</body>

您可以添加以下CSS代码来创建clearfix：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

附注：请考虑使用CSS类而不是内联样式（align=“right”，width=“600px”），以便更好地分离关注点和可维护性。

赞(0）回复(0）举报 2023-06-25

iecba09b2#

将图像的高度设置为“auto”。这也许能解决问题。

img{
    height: auto;
}

赞(0）回复(0）举报 2023-06-25

我来回答

css 我怎样才能防止图像从我的身体容器中爆发出来？

2条答案

相关问题

热门标签

最新问答