StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POForce Parent Div To Inherit Child Image Height (For Responsive Scaling Images)
primarykey
Id
10828814
data
AcceptedAnswerId
10842607
AnswerCount
2
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-05-31T06:58:16.950
FavoriteCount
0
LastActivityDate
2012-05-31T23:28:06.953
LastEditDate
2012-05-31T07:03:37.540
LastEditorUserId
941340
OwnerUserId
941340
ParentId
0
PostTypeId
1
Score
0
ViewCount
1668
LastEditorDisplayName
text
Body
<p>I'm trying to make the parent div inherit the height that the responsive child image sets... but it's not working.</p> <p>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.</p> <p>If I set the .mosaic-block-three element to height: auto, then it fails completely and goes down to 0 height.</p> <p>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 :-)</p> <p>The example page is here: <a href="http://bit.ly/KzfN2g" rel="nofollow">http://bit.ly/KzfN2g</a></p> <p>My goal is to replicate how the images are perfectly responsive on this page, but with the addition of the rollover mosaic text: <a href="http://bit.ly/LIrJv7" rel="nofollow">http://bit.ly/LIrJv7</a></p> <pre><code><div class="mosaic-block-three magnifier2"> <a href="/wp-content/uploads/2012/05/home-office-vignette-tiered-architella-shades-01.png" class="mosaic-overlay fancybox" rel="gallery" style="display: inline; opacity: 0; "> </a> <div class="details"> <a class="pf_title_link" href="/portfolio/vignette-tiered-architella-shades/">Vignette® Tiered™ Architella® Shades </a> </div> <div class="mosaic-backdrop" style="display: block; "> <img src="/wp-content/uploads/2012/05/home-office-vignette-tiered-architella-shades-01-1024x564.png" class="attachment-large wp-post-image" alt="home-office-vignette-tiered-architella-shades-01" title="home-office-vignette-tiered-architella-shades-01"> </div>  </div> </code></pre>
Tags
<wordpress><css3><height><responsive-design><inheritance>
Title
Force Parent Div To Inherit Child Image Height (For Responsive Scaling Images)
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USRob Vanders
UserOwnerUserId
1. USRob Vanders
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.