我有一个Div,它拥有设定高度和未定义宽度的头像。我想在头部拍摄图像的左侧显示徽标图像。我希望徽标(Techno Lock Image)能够填充剩余的宽度,而不是在Name Bar Div后面。如果头像URL中断我使用JavaScript来显示没有图像。如果头部拍摄的图像被破坏,则徽标应该填满整个div。
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);
}
答案 0 :(得分:0)
我能够根据Nickfmc的JSFiddle修复此问题,使用包装上的Display:Flex和徽标div上的flex:1。
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);
}