引导 - img 标签不适合 div - Bootstrap- img tag doesn't fit in div 小贝子编程网

>我有两个div，每个div里面都有一个图像和段落。当我给div 类col-md-5时，img 标签并没有覆盖所有的divs 空间。我该如何解决这个问题？代码和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%;
}

杰斯菲德尔

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

因此，您对此有一些解决方案。

div 将包含列内的所有内容，并为该div 提供边框

见下文或>小提琴

#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>

从col-md-5中取出paddings

请参阅下面的片段或小提琴

#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>

一个非正统的解决方案是将图像的宽度增加 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>

如果你想

解决这个问题，我已经找到了使用你的代码的简单修复，

追加类：

 class="img-responsive"

对图像和 CSS 进行一些更改，如下所示：

.posts {
    width: 40%;
    height: 350px;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    display: flex;
    flex-direction: column;
    padding: 0;
}

所做的更改是： Padding:0;

以 JsFiddle 为例

引导 - img 标签不适合 div

相关内容

最新更新

热门标签：