Force Parent Div To Inherit Child Image Height (For Responsive Scaling Images)

I’m trying to make the parent div inherit the height that the responsive child image sets… but it’s not working.

This is for a responsive website, so when resizing the browser, the image resizes. The problem is that if I set a height on the parent .mosaic-block-three element, then the image appears to stay fixed at that height.

If I set the .mosaic-block-three element to height: auto, then it fails completely and goes down to 0 height.

What am I missing to make this scale smoothly? I can rearrange and add css, html or javascript, whatever I have to do to get it done. I’ve tried for hours so any help is GREATLY appreciated :-)

The example page is here: http://bit.ly/KzfN2g

My goal is to replicate how the images are perfectly responsive on this page, but with the addition of the rollover mosaic text: http://bit.ly/LIrJv7

Problem courtesy of: Rob Vanders

Solution

This is working with these few CSS changes (tested in Chrome only):

mosaic.css line 46

.mosaic-block-three { height: 250px
}

mosaic.css line 74

.mosaic-backdrop { position: absolute
}

promotion.css line 92

.details { margin: 15px 20px;
margin: 0 20px;}

responsepress.css line 155

.mosaic-backdrop img {float:left}

You might want to move the border-radius:5px
to the img now also.

Solution courtesy of: tobyj

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Force Parent Div To Inherit Child Image Height (For Responsive Scaling Images)

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录