Div调整宽度以填充未定义大小的图像旁边的空间

Question

我有一个Div，它拥有设定高度和未定义宽度的头像。我想在头部拍摄图像的左侧显示徽标图像。我希望徽标（Techno Lock Image）能够填充剩余的宽度，而不是在Name Bar Div后面。如果头像URL中断我使用JavaScript来显示没有图像。如果头部拍摄的图像被破坏，则徽标应该填满整个div。

My JSFiddle

HTML：

<div class="image-holder">
  <div class="front">
    <img src="http://cdn.photographyproject.com.au/wp-content/uploads/2013/04/corporate-headshot.jpg">
  </div>
  <div class="back"></div>
  <div class="caption">
    <a href="http://google.com">John Smith</a>
  </div>
</div>
<div class="image-holder">
  <div class="front">
    <img src="http://www.playbillsvspayingbills.com/wp-content/uploads/2009/10/ben-whitehair-military-headshot.jpg">
  </div>
  <div class="back"></div>
  <div class="caption">
    <a href="http://google.com">Greg Hampton</a>
  </div>
</div>
<div class="image-holder">
  <div class="front">
    <img src="Error.src" onerror="this.style.display='none'"/>
  </div>
  <div class="back"></div>
  <div class="caption">
    <a href="http://google.com">Candice Cade</a>
  </div>
</div>

CSS：

.image-holder {
  width: 300px;
  height: 164px;
  position: relative;
}

.image-holder img {
  width: auto;
  height: 164px;
  //max-height: 164px;
}

.front {
  position: absolute;
  z-index: 30;
  right: 0px;
}

.back {
  position: absolute;
  z-index: 20;
  background-image: url("https://www.callcentrehelper.com/images/stories/2010/2016/06/cyber-security-blue-image-760-300x164.jpg");
  background-size: contain;
  background-repeat:no-repeat;
  width: 300px;
  height: 164px;
}

.caption {
  background-color: rgb(43, 69, 83);
  bottom: 0px;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: block;
  font-family: Arial;
  font-size: 14px;
  height: 43px;
  left: 0px;
  line-height: 18.2px;
  opacity: 0.9;
  padding-bottom: 7px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  position: absolute;
  right: 0px;
  text-size-adjust: 100%;
  width: 300px;
  z-index: 40;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: rgba(0, 0, 0, 0);
  background-image: none;
  background-origin: padding-box;
  background-position-x: 0px;
  background-position-y: 50%;
  background-repeat-x: ;
  background-repeat-y: ;
  background-size: auto;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: auto;
  display: inline;
  font-family: HelveticaNeueLTStd-Lt;
  font-size: 20px;
  font-weight: 500;
  height: auto;
  line-height: 26px;
  text-decoration: none;
  text-size-adjust: 100%;
  width: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Answer 1

我能够根据Nickfmc的JSFiddle修复此问题，使用包装上的Display：Flex和徽标div上的flex：1。

Nicks JSFiddle

HTML：

<div class="image-holder">
  <div class="back"></div>
  <div class="front">
    <img src="http://cdn.photographyproject.com.au/wp-content/uploads/2013/04/corporate-headshot.jpg">
  </div>
  <div class="caption">
    <a href="http://google.com">John Smith</a>
  </div>
</div>
<div class="image-holder">
  <div class="back"></div>
  <div class="front">
    <img src="http://www.playbillsvspayingbills.com/wp-content/uploads/2009/10/ben-whitehair-military-headshot.jpg">
  </div>
  <div class="caption">
    <a href="http://google.com">Greg Hampton</a>
  </div>
</div>
<div class="image-holder">
  <div class="back"></div>
  <div class="front">
    <img src="Error.src" onerror="this.style.display='none'" />
  </div>
  <div class="caption">
    <a href="http://google.com">Candice Cade</a>
  </div>
</div>

CSS：

.image-holder {
  width: 300px;
  height: 164px;
  position: relative;
  Display: flex;
  align-items: stretch;
}

.image-holder img {
  width: auto;
  height: 164px;
  //max-height: 164px;
}

.front {
  z-index: 30;
  left: 0px;
}

.back {
  z-index: 20;
  background-image: url("https://www.callcentrehelper.com/images/stories/2010/2016/06/cyber-security-blue-image-760-300x164.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 300px;
  height: 164px;
  flex: 1;
}

.caption {
  background-color: rgb(43, 69, 83);
  bottom: 0px;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: block;
  font-family: Arial;
  font-size: 14px;
  height: 43px;
  left: 0px;
  line-height: 18.2px;
  opacity: 0.9;
  padding-bottom: 7px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  position: absolute;
  right: 0px;
  text-size-adjust: 100%;
  width: 300px;
  z-index: 40;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: rgba(0, 0, 0, 0);
  background-image: none;
  background-origin: padding-box;
  background-position-x: 0px;
  background-position-y: 50%;
  background-repeat-x: ;
  background-repeat-y: ;
  background-size: auto;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: auto;
  display: inline;
  font-family: HelveticaNeueLTStd-Lt;
  font-size: 20px;
  font-weight: 500;
  height: auto;
  line-height: 26px;
  text-decoration: none;
  text-size-adjust: 100%;
  width: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}