html - Bootstrap- img 标签不适合 div

Question

我有两个 div，每个里面都有一个图像和一个段落。当我将 col-md-5 类赋予 div 时，img 标签并未覆盖所有的 div 空间。我该如何解决？代码和JsFiddle如下。

HTML:

<div id="recent-posts" class="center-block">
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">

                        </div>
                    </div>
                <button class="btn btn-success">title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">

                    </div>
                </div>
                <button class="btn btn-success" >title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
        </div>

CSS:

#recent-posts{
    width: 70%;
    height: 350px;
    display: flex;
    justify-content: space-around;
    position: relative;
    margin-bottom: 100px;
}
.posts{
    width: 40%;
    height: 350px;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    display: flex;
    flex-direction: column;
}
.posts img{
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.posts .btn-success{
    background-color: #01a89e;
    position: absolute;
    width: 50%;
    top: 227px;
    left: 24%;
    color: #101010;
    cursor: auto;
}
.posts p{
    margin-top: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(46, 183, 175, .7);
    overflow: hidden;
    width: 100%;
    height:0;
    transition: .8s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
    margin-left: 15px;
}
.posts-div:hover .overlay {
    bottom: 0;
    top: 0;
    height: 70%;
}
.posts-div{
    width: 100%;
    height: 70%;
}

Jsfiddle

Answer 1

发生这种情况是因为每个 Bootstrap 列都有 padding-left:15px padding-right:15px 所以内容保留在列内但不覆盖填充。

因此您有一些解决方案。

1. 添加一个包含列内所有内容的 div 并为该 div 设置边框

见下文或> fiddle

#recent-posts {
  width: 70%;
  height: 350px;
  display: flex;
  justify-content: space-around;
  position: relative;
  margin-bottom: 100px;
}

.posts {
  display: flex;
  flex-direction: column;
}

.post-container {
  height: 350px;
  margin-top: 20px;
  position: relative;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #888888;
}

.posts img {
  width: 100%;
  height: 100%;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
}

.posts .btn-success {
  background-color: #01a89e;
  position: absolute;
  width: 50%;
  top: 227px;
  left: 24%;
  color: #101010;
  cursor: auto;
}

.posts p {
  margin-top: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: rgba(46, 183, 175, .7);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .8s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
}

.overlay div:first-child {
  margin-left: 15px;
}

.posts-div:hover .overlay {
  bottom: 0;
  top: 0;
  height: 70%;
}

.posts-div {
  width: 100%;
  height: 70%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="recent-posts" class="center-block">
  <div class="posts col-md-5">
    <div class="post-container">


      <div class="posts-div">
        <img src="https://www.w3schools.com/css/img_fjords.jpg">
        <div class="overlay">

        </div>
      </div>
      <button class="btn btn-success">title</button>
      <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
    </div>
  </div>
  <div class="posts col-md-5">
    <div class="post-container">
      <div class="posts-div">
        <img src="https://www.w3schools.com/css/img_fjords.jpg">
        <div class="overlay">

        </div>
      </div>
      <button class="btn btn-success">title</button>
      <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
    </div>
  </div>
</div>

1. 从 col-md-5 中删除 paddings

请参阅下面的片段或 fiddle

#recent-posts{
    width: 70%;
    height: 350px;
    display: flex;
    justify-content: space-around;
    position: relative;
    margin-bottom: 100px;
}
.posts{
    width: 40%;
    height: 350px;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    display: flex;
    flex-direction: column;
}
.posts.col-md-5 {
	padding-left:0;
	padding-right:0;
}
.posts img{
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.posts .btn-success{
    background-color: #01a89e;
    position: absolute;
    width: 50%;
    top: 227px;
    left: 24%;
    color: #101010;
    cursor: auto;
}
.posts p{
    margin-top: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(46, 183, 175, .7);
    overflow: hidden;
    width: 100%;
    height:0;
    transition: .8s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
    margin-left: 15px;
}
.posts-div:hover .overlay {
    bottom: 0;
    top: 0;
    height: 70%;
}
.posts-div{
    width: 100%;
    height: 70%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="recent-posts" class="center-block">
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">
                      
                        </div>
                    </div>
                <button class="btn btn-success">title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">
                        
                    </div>
                </div>
                <button class="btn btn-success" >title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
        </div>

1. 一个非正统的解决方案是将图像的宽度增加 30px(等于列的左右填充)，然后将其向左移动 15px 使其居中

请参阅下面的代码片段或 > jsfiddle

#recent-posts{
    width: 70%;
    height: 350px;
    display: flex;
    justify-content: space-around;
    position: relative;
    margin-bottom: 100px;
}
.posts{
    width: 40%;
    height: 350px;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    display: flex;
    flex-direction: column;
}
.posts img{
    width: calc(100% + 30px);
    height: 100%;
		margin-left:-15px;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.posts .btn-success{
    background-color: #01a89e;
    position: absolute;
    width: 50%;
    top: 227px;
    left: 24%;
    color: #101010;
    cursor: auto;
}
.posts p{
    margin-top: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(46, 183, 175, .7);
    overflow: hidden;
    width: 100%;
    height:0;
    transition: .8s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
    margin-left: 15px;
}
.posts-div:hover .overlay {
    bottom: 0;
    top: 0;
    height: 70%;
}
.posts-div{
    width: 100%;
    height: 70%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="recent-posts" class="center-block">
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">
                      
                        </div>
                    </div>
                <button class="btn btn-success">title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
            <div class="posts col-md-5">
                <div class="posts-div">
                    <img src="https://www.w3schools.com/css/img_fjords.jpg">
                    <div class="overlay">
                        
                    </div>
                </div>
                <button class="btn btn-success" >title</button>
                <p class="text-center">dljfsdljfdsl;jfdsljfdljf</p>
            </div>
        </div>