html - css冲突扩展宽度

Question

很难弄清楚我需要在哪里使用以避免过度向右扩展宽度导致向右滚动出现并且小图像的高度变小。每个高度应为 250px 以适合。另外我需要在每张图片的左下角添加文字。

这是供引用的图片。 Click here

HTML

<div class="news-banner">
<h1 class="text-center header-text">News</h1>
</div>

<div class="row">
<div class="col-md-8 img-container">
    <img class="img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"> 
</div>
<div class="col-md-4 img-small">
    <img class="img-responsive" src="/assets/icons/13-Cuidados-alternativos-en-familia.jpg">
    <img class="img-responsive" src="/assets/icons/man-person-cute-young-large.jpg">
</div>

CSS

.news-banner {
height: 120px;
background: #eb1212;
position: relative;
border-bottom: 2px solid white;
}

.header-text{ 
color: white;
width: 50%;
height: 50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0; 
}

.img-container {
height: 500px;
display: flex;
}

.img-small {
height: 100%;
}

Answer 1

两点的解决方案

It should be 250px in height each to fit.

Plus I need to add text in the bottom left of each image.

将 img-wrapper 类添加到带有类行的 div 中，并使用一些额外的 css 规则，这是演示。 以全页模式查看

.news-banner {
  height: 120px;
  background: #eb1212;
  position: relative;
  border-bottom: 2px solid white;
}
.header-text {
  color: white;
  width: 50%;
  height: 50%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.img-container {
  height: 100%;
  display: flex;
}
.img-small {
  height: 100%;
}
.img-small div {
  height: 50%;
}
.img-small img {
  height: 100%;
}
.img-wrapper {
  height: 500px;
}
span.img-desc {
  color: white;
  bottom: 5px;
  left: 30px;
  font-size: 20px;
  position: absolute;
}
.img-wrapper.row div[class|='col-md'] {
  padding: 0px;
}
html {
  overflow-x: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="news-banner">
  <h1 class="text-center header-text">News</h1>
</div>

<div class="row img-wrapper">
  <div class="col-md-8 img-container">
    <img class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
    <span class="img-desc"> This Image Description </span>
  </div>
  <div class="col-md-4 img-small">
    <div class="col-md-12">
      <img class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
      <span class="img-desc"> This Image Description </span>
    </div>
    <div class="col-md-12">
      <img class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
      <span class="img-desc"> This Image Description </span>
    </div>

  </div>
</div>