Databases
StackOverflow2013
Postsdbo
POCSS: Placing <divs> on a responsively resized image
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS: Placing <divs> on a responsively resized image
    text
    copied!<p>I have an image. It scales in size responsively, while maintaining its aspect ratio. On top of that image a couple of smaller images are laid out (navigation links). Those smaller images <em>must</em> scale with the main-image <em>and</em> be at the (relative) same spot at all times.</p> <p><strong>UPDATE:</strong></p> <p>I made a jsfiddle to illustrate the problem: <a href="http://jsfiddle.net/v9V5p/" rel="nofollow">http://jsfiddle.net/v9V5p/</a></p> <p>Bart Simpson is the image. It should always stay within the confines of the the dark-blue container. A light-blue navigation-link is overlaid, it should always cover Bart's face.</p> <p>This will work in WebKit-browsers, in FF or Opera Bart will be too big. If you use one of these browsers: Bart should be centered in a dark-blue container which is only 75% of the preview-window-height.</p> <hr> <p>The first idea was this:</p> <pre><code>&lt;div class="image-container"&gt; &lt;div class="navigation-link"&gt;&lt;/div&gt; &lt;div class="navigation-link"&gt;&lt;/div&gt; &lt;div class="navigation-link"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>and the CSS:</p> <pre><code>.image-container { bottom: 0; width: 100%; height: whatever px; background: url(my image) no-repeat bottom center; background-size: contain; } </code></pre> <p>Easy. The problem is <code>image-container</code> can grow larger than the image in either <code>height</code> or <code>width</code> and I don't know of a way in CSS to find out which it is, thus I have no way to consistently place/scale the <code>navigation-link</code>s in respect to their parent div.</p> <p>My solution was:</p> <pre><code>&lt;div class="image-container"&gt; &lt;div class="image-wrapper"&gt; &lt;img class="image" src="my image" /&gt; &lt;div class="navigation-link"&gt;&lt;/div&gt; &lt;div class="navigation-link"&gt;&lt;/div&gt; &lt;div class="navigation-link"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and the CSS:</p> <pre><code>.image-container { bottom: 0; width: 100%; height: whatever px; } .image-wrapper { display: inline-block; // shrink-to-fit } .image { max-height: 100%; max-width: 100%; } </code></pre> <p>The <code>img</code> scales while keeping its aspect ratio and <code>image-wrapper</code> shrinks to fit around it, thereby giving the <code>navigation-links</code> something to hook into.</p> <p>That works beautifully ... in WebKit-browsers.</p> <p>Firefox and Opera set <code>max-height</code> and <code>max-width</code> to <code>auto</code> if the parent element doesn't have <code>height</code> and <code>width</code> set. I've been told that's according to W3C specs.</p> <p>Is there any way I can do what I want in CSS? I don't want to turn to JavaScript for layouting, if I don't have to.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload