置於響應式圈子內的圖像

Question

問題

我試圖將圖像置於響應式圓圈（div）中，而響應式圓圈本身就是另一個響應圈的孩子。

我覺得我有釘子的div，但只要我包含圖像的比例變形，我無法弄清楚正確的CSS代碼。

這兩個div是爲了我計劃的未來邊界效應。

我現在有...

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

我的問題的解決方案是使用CSS背景屬性爲類.circle（見評論，歡呼聲他幫助!!）。

我有許多新聞故事，每個都有自己的圖像放在一個PHP數組中 - 我打算使用數據庫，但暫時數組就足夠了 - 因此img src將根據加載哪個新聞故事。

我打算用：

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

現在我使用的CSS背景屬性，我將如何解析PHP到HTML/CSS？

我是新來此，道歉，如果我沒有被明確...

Answer 1

首先，你可以讓你的圖像的基礎圓我說按照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; 
    } 

但對於您的使用，讓你的PHP like this foreach循環能夠直接應用CSS給它（因爲陣列中的圖像存儲爲<img src="www.mysrc.com/kittens.jpg" />。如果他們只是URL，你必須改變在foreach循環中一點點）

<?php 

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

回聲行，然後你可以根據我聊天

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

編輯應用CSS您。設置PHP這樣第一（必須是<script>標籤外）

<?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"); 
?> 

並通過將其轉換成JSON並把它在<script>標籤被應用到該元素調用它。

的Javascript解決（沒有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"}, 
    {} 
]; 

Answer 2

所以，如果你想達到某種的圓形圖像的3D效果你絕對可以只得到它圖像標籤只有這樣代碼纔會非常乾淨，並且很容易通過PHP放置圖像。

沿着這些路線只分配100％的邊界半徑和適當的箱陰影的形象，事：

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

看看這個http://codepen.io/nobitagit/pen/trEuJ

由於代碼是這樣簡單根據您的需求使它對響應友好將非常容易。

Answer 3

@Zeaklous我已經試過你的方法，但我相信在這種情況下我必須使用CSS Background-Image: url();

因此，我需要的方法動態改變Background-Image: url();，並在稍後搜索後，似乎跟在this技術使用background-image:url('<?php echo $url ?>');將工作？！？

雖然這是在黑暗中刺，我第一次用這種性質的代碼。