CODEWITHSUNDEEP
htmlcssresponsive-design
Sam Holguin
Sam Holguin

Reputation: 563

Images placed within responsive circles

The Problem

I am trying to place images within a responsive circle (div), which is itself the child of another responsive circle.

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.

The two divs are for a future border effect I am planning.

What I currently have...

CodePen

HTML

<section class="col-4">
  <div class="wrapper">
    <div class="outta-circle">  
      <div class="circle">
        <!-- <img src="#"> -->
      </div>
    </div>
  </div>

  <div class="wrapper">         
    <div class="outta-circle">  
      <div class="circle">
        <!-- <img src="#"> -->
      </div>
    </div>
  </div>
</section>

CSS

.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;
}

The solution to my issue is to use the CSS Background property for the class .circle (see comments, cheers for the help there!!).

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 img src will change depending on which news story is loaded.

I was going to use:

<img src="<?php echo $article["img"]; ?>" alt="<?php echo $article["title"]; ?>">

Now I have to use the CSS Background property, how would I parse the PHP into the HTML/CSS??

I'm new to this, apologies if I haven't been clear...

Upvotes: 2

Views: 4476

Answers (3)

Zach Saucier
Zach Saucier

Reputation: 25954

First of all you can make your images a basic circle I said by following this tutorial

.circular {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://link-to-your/image.jpg) no-repeat;
    }

But for your use, make a foreach loop in your PHP like this to be able to apply CSS directly to it (given the images in the array are stored like <img src="www.mysrc.com/kittens.jpg" />. If they are just the URL you have to change the echo line in the foreach loop a little)

<?php

   $cont=0;
   echo '<ul>';
   foreach($array as $arrval){
       echo '<li class="circular">'.$arrval.'</li>';   
       $cont++;
   }
   echo "</ul>";
   ?>

And then you can apply the CSS with 

li.circular{
        width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

Edit based on my chat with you. Set up the PHP this way first (has to be outside of <script> tags)

<?php
$array1 = array('img' => "http://izview.com/wordpress/wp-content/uploads/2008/07/the-chandelier.jpg",
               'title' => 'article',
               'content' => 'This is the content coming from PHP',
               'date' => "6/27/2013");
?>

And call it by converting it to json and putting it in <script> tags to be applied to the element.

Javascript fix (no PHP) jsFiddle

var articleArray = [{img: "http://izview.com/wordpress/wp-content/uploads/2008/07/the-chandelier.jpg", title: "Article Name", content: "This is the content coming from PHP", date: "6/27/2013"},
    {}
];

Upvotes: 2

Sam Holguin
Sam Holguin

Reputation: 563

@Zeaklous I have tried your method, but I believe in this instance I have to use CSS Background-Image: url();

Therefore I need a method of dynamically changing the Background-Image: url(); and after a little searching it seems following this technique using background-image:url('<?php echo $url ?>'); would work?!?

It's a stab in the dark though, my 1st time with code of this nature.

Upvotes: 1

Aurelio
Aurelio

Reputation: 25792

So if you're trying to achieve a sort of 3d effect on a rounded image you can definitely get it with just the image tag only so the code will be very clean and it will be easy to place the image through PHP.

Simply assign a 100% border-radius and a proper box-shadow to the image, something along these lines:

 img {
  border-radius: 100%;
  box-shadow: 9px 0 red;
 }

Take a look at this http://codepen.io/nobitagit/pen/trEuJ

As the code is this simple it will be very easy to make it responsive-friendly as to your needs.

Upvotes: 2

Related Questions