个人中心
gpt4 book ai didi

html - 网格图像溢出其他元素

转载 作者：行者123 更新时间：2023-11-28 02:29:16 27 4
gpt4 key购买 nike

这是片段。看起来这里看起来还可以。但在我的浏览器中，最后一张图片溢出到蓝色部分。它下面的文字根本不显示。溢出的是ul的3里。

/****************
Global style
****************/

body {
  margin: 0;

  text-align: center;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

h1, h2 {
  margin: 0;
  padding: 10px 0;

}

p {
  margin: 0;
  padding: 10px 10px;
}
li {
  list-style: none;
}

.btn {
  background-color: #e3e3e3;
  text-decoration: none;
  padding: 3px 5px;
  border 1px solid black;
}


/*****************
SHOWCASE
*****************/

#showcase {
  min-height: 400px;
  color: white;
}

#showcase .backimage {
  position: absolute;
  background: url("https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg");
  z-index: -2;
  height: 400px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.8;
}

.showcasecontent {
  padding: 0 60px;
}

/*******
section A
*************/
.section-a {
  background: #8e24aa;
  color: white;
}

/*******
section B
*************/
.section-b {

  padding: 15px;
  background-color: #363636;
}

.licontent {
  background: white;
  margin-bottom: 10px;

}

.img-responsive{
display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

/***********
Section C
***********/

.section-c {
  padding: 15px;
  background: #1e88e5;
  color: white;
}

/**********
Section-D
***********/
.section-d .box {

  padding: 15px;
}

.box1 {
  color: black;
  background: #76ff03;
}

.box2 {
  background: #ffc107;
}

footer {
  background: black;
  color: white;
  padding: 15px;
}


/************
Media query
***************/

@media (min-width:700px) {
  .grid {
    display: grid;
  }
}



/**@media (min-width: 700px) {
  .grid {
    display:grid;
    grid-template-columns:1fr repeat(2, minmax(2,(auto,25em))
  }
.content-wrap,
.section-b ul {
  grid-column: 2/4;
}

.box, footer div {
  grid-column: 2/4;
}

}**/
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="reset.css" type="text/css">
  <link rel="stylesheet" href="responsivegrif.css" type="text/css">
  <title>responsivegrid</title>
</head>
<body>
  <div id="showcase" class="grid">
    <div class="image">
        <div class="backimage"></div>
    </div>
    <div class="showcasecontent">

        <div class="welcome">
          <h1>Welcome To My Responsive Page</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem pariatur, esse accusamus quis magni eveniet est veritatis asperiores temporibus iusto laborum illo eos doloremque dolorum corporis aut in nostrum sapiente.</p>
          <a class="btn" href="#">Read more</a>
        </div>

    </div>

    </div>
    <div>



<div class="main">



  <div class="section-a showcasecontent grid">
      <h2>This is section A</h2>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis amet excepturi consequatur rem libero non corporis asperiores tempore, minus nostrum?</p>
      </div>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni culpa beatae nemo. Praesentium, blanditiis sequi ducimus accusamus iure tempore expedita.</p>
      </div>
  </div>

  <div class="section-b grid">
    <ul>
      <li>
        <div class="li">
          <img src="https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg" alt="">
        </div>
        <div class="licontent">
          <h2>Section B Item 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloribus, magni vitae odio doloremque facilis laborum cupiditate ut tempore quaerat.</p>
        </div>
      </li>
      <li>
        <div class="li">
          <img src="https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg" alt="">
        </div>
        <div class="licontent">
          <h2>Section B Item 2</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, aliquid. Tempora voluptas necessitatibus aut repudiandae eum incidunt adipisci animi laudantium.</p>
        </div>

      </li>
      <li>
        <div class="li">
          <img  src="https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg" alt="">
        </div>
        <div class="licontent">
          <h2>Section B Item 3</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ratione odio nulla, iste error impedit itaque. Saepe unde, consectetur impedit.</p>
        </div>
      </li>
    </ul>
  </div>

  <div class="section-c grid">
    <div class="content-wrap">
      <h1>Section C</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur rem, sunt laborum blanditiis dolor tempora architecto doloremque amet dolorem autem.</p>

    </div>

  </div>
  <div class="section-d grid">
    <div class="box box1">
    <h1>BOX 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit eveniet, veritatis laborum blanditiis officia nesciunt sed porro, molestias ullam quisquam.</p>

  </div>
  <div class="box box2" >
    <h1>BOX 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quibusdam mollitia possimus accusamus delectus, pariatur ipsa ducimus tenetur neque facere!</p>

  </div>

</div>

</div>
<footer class="grid">
  <div>
  <p>This is the footer</p>
</div>
  <div>
  <p>This is the footer</p>
</div>
</footer>

</body>
</html>

大家好，我正在尝试通过 CSS 网格创建一个响应式页面。但是其中一个图像溢出了。所以我将网格类设置为本节最后一列图像流

<div class="section-b grid">
<ul>
  <li>
    <div class="li">
      <img src="item-1-image.jpeg" alt="">
    </div>
    <div class="licontent">
      <h2>Section B Item 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloribus, magni vitae odio doloremque facilis laborum cupiditate ut tempore quaerat.</p>
    </div>
  </li>
  <li>
    <div class="li">
      <img src="item-2-image.jpeg" alt="">
    </div>
    <div class="licontent">
      <h2>Section B Item 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, aliquid. Tempora voluptas necessitatibus aut repudiandae eum incidunt adipisci animi laudantium.</p>
    </div>

  </li>
  <li>
    <div class="li">
      <img src="item-3-image.jpeg" alt="">
    </div>
    <div class="licontent">
      <h2>Section B Item 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ratione odio nulla, iste error impedit itaque. Saepe unde, consectetur impedit.</p>
    </div>
  </li>
</ul>

这是 CSS

@media (min-width:700px) {.grid {display: grid;}}

最佳答案

尝试在 img 标签内使用“img-responsive”类，如果您使用的是 Bootstrap 。如果没有，则在 css 文件中添加类“img-responsive”。

CSS

.img-responsive{
display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

html

<img class="img-responsive" src="https://farm1.staticflickr.com/1/2759520_6dea8b9007.jpg" alt="Greece-1173 - Temple of Athena by Dennis Jarvis, on Flickr">

关于html - 网格图像溢出其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47788175/

27 4 0
文章推荐： html - 基础框架 : My code stacks vertically when I think I followed the example to make them stack horizontally
文章推荐： javascript - 重复输入基本验证
文章推荐： C++ 类，对#ifdef、#define 和#endif 的混淆
文章推荐： javascript - 具 Angular 单击事件必须单击两次才能完成操作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com