Databases
StackOverflow2013
Postsdbo
POImages placed within responsive circles
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImages placed within responsive circles
    text
    copied!<h1>The Problem</h1> <p>I am trying to place images within a responsive circle (div), which is itself the child of another responsive circle.</p> <p>I feel I have the divs nailed, but as soon as I include an image the proportions get distorted and I can't figure out the correct CSS code.</p> <p>The two divs are for a future border effect I am planning.</p> <h1>What I currently have...</h1> <p><a href="http://codepen.io/samholguin/pen/InFwk" rel="nofollow">CodePen</a></p> <p>HTML</p> <pre><code>&lt;section class="col-4"&gt; &lt;div class="wrapper"&gt; &lt;div class="outta-circle"&gt; &lt;div class="circle"&gt; &lt;!-- &lt;img src="#"&gt; --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="wrapper"&gt; &lt;div class="outta-circle"&gt; &lt;div class="circle"&gt; &lt;!-- &lt;img src="#"&gt; --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; </code></pre> <p>CSS</p> <pre><code>.col-4 { width: 1068px; } .wrapper { width: 48.68%; max-height: 520px; background-color: white; } .outta-circle { width: 100%; height: auto; margin: 80px auto; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: red; } .circle { width: 96.15%; height: auto; padding-bottom: 96.15%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: blue; overflow: hidden; } </code></pre> <p>The solution to my issue is to use the CSS Background property for the class <code>.circle</code> (see comments, cheers for the help there!!).</p> <p>I have a number of news stories each with their own image placed in a PHP array - I plan to use a database but for the time being an array will suffice - therefore the <code>img src</code> will change depending on which news story is loaded.</p> <p>I was going to use:</p> <pre><code>&lt;img src="&lt;?php echo $article["img"]; ?&gt;" alt="&lt;?php echo $article["title"]; ?&gt;"&gt; </code></pre> <p>Now I have to use the CSS Background property, how would I parse the PHP into the HTML/CSS??</p> <p>I'm new to this, apologies if I haven't been clear...</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